Использование углового материала только в части страницы

Меня интересует использование контактной формы на основе углового материала на странице сайта Shopify. Поскольку остальная часть сайта не построена с помощью Angular Material (пока), я хотел бы реализовать эту форму контакта модульным способом и изолировать ее в своем собственном div. Проблема, с которой я столкнулся, заключается в том, что таблица стилей (в настоящее время связанная в голове) для углового материала влияет на элементы страницы вне желаемой области влияния. Можно ли изолировать содержимое углового материала от остальной части страницы? Как можно это сделать?Использование углового материала только в части страницы

источник

2016-05-05 dan chow

Единственный способ, я думаю, что вы можете это сделать, используя iframe, потому что css всегда будет сочетаться и будет следовать правилу каскада, поэтому тот, который ниже, переопределит остальных.

источник

2016-05-05 00:24:43 scyrizales

Я могу видеть, как это может быть выгодно. Если я использую iframe содержимого с сервера или приложения, тогда я мог бы еще больше контролировать представление формы. –

Вы можете создать отдельный Угловой модуль для требуемого файла шаблона и разместить там угловой материал. Ссылка на угловой материал CSS только в этом файле шаблона. Таким образом, это не повлияет на другие страницы.

источник

2016-05-05 17:03:02

Это звучит неплохо, можете ли вы указать мне документы или учебники по этому методу? Или это то же самое, что было предложено в ответе огужана? –

Да, ответ @ oguzhan выглядит хорошо для меня. вы можете следовать этому. –

Вы можете использовать угловые ui-маршрутизаторы с отдельными угловыми модулями. Таким образом, вы можете вводить угловой материал в одно из состояний ваших маршрутов, а затем использовать его.

 module.exports = 
     angular.module('parentModule', [ 
     'angularMoment', 
     require("./childFolder"), 

     ]) 
    .config(function ($stateProvider) { 
    $stateProvider 
    .state('parent', { 
     url:"parent/", 
     views:{ 
     '': { 
      templateUrl: 'main/layout.html', 
      controller: 'MainController' 
     } 
     } 
    }) 
.controller('MainController', require('./mainController'));

module.exports = 
     angular.module('childModule', [ 
     'ngMateiral', 'ngMessages' 
     ]) 
.config(function ($stateProvider) { 
     $stateProvider 
     .state('parent.child', { 
      url: "parent/:id", 
      views: { 
      '': { 
       templateUrl: 'main/layout.html', 
       controller: 'MainController' 
      }, 
      '[email protected]': { 
       templateUrl: 'main/child/layout.html' 
       controller: 'ChildController' 
      } 
      } 
     }); 
    }) 
    .controller('ChildController', require('./childController'));

источник

2016-05-06 11:15:01 oguzhan00

Использование углового материала только в части страницы

ответ

Смежные вопросы