仅在页面的一部分中使用 Angular Material答案

【问题标题】：Use Angular Material in only a portion of a page仅在页面的一部分中使用 Angular Material
【发布时间】：2016-05-06 19:15:01
【问题描述】：

我有兴趣在 Shopify 托管页面上使用基于 Angular Material 的联系表单。因为网站的其余部分还没有使用 Angular Material 构建，所以我想以模块化的方式实现这个联系表单，并将其隔离在自己的 div 中。我遇到的问题是 Angular Material 的样式表（当前链接在头部）正在影响所需影响区域之外的页面元素。是否可以将 Angular Material 内容与页面的其余部分隔离开来？怎么办？

【问题讨论】：

标签： angularjs shopify angular-material

【解决方案1】：

您可以为您所需的模板文件创建单独的 Angular 模块并在那里注入 Angular 材料。仅在该模板文件中链接 angular-material CSS。这样就不会影响其他页面了。

【讨论】：

这听起来是个好方法，你能给我指点关于这种方法的文档或教程吗？还是与 oguzhan000 的回答中建议的相同？
是的，@oguzhan 的回答对我来说还可以。你可以照着做。

【解决方案2】：

我认为您可以做到这一点的唯一方法是使用 iframe，因为 css 将始终合并，并且将遵循级联规则，因此下面的将覆盖其他的。

【讨论】：

我知道这有什么好处。如果我使用来自服务器或应用程序的 iframe 内容，那么我可以更好地控制表单提交。

【解决方案3】：

您可以将 angular-ui-router 状态与单独的 Angular 模块一起使用。因此，您可以将 angular-material 注入您的路线状态之一，然后使用它。

     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'
            },
            'content@main': {
              templateUrl: 'main/child/layout.html'
              controller: 'ChildController'
            }
          }
        });
    })
     .controller('ChildController', require('./childController'));

【讨论】：