为啥我的“代码”HTML 元素没有 AngularJS Material 设置的设计？

Posted

技术标签:

【中文标题】为啥我的“代码”HTML 元素没有 AngularJS Material 设置的设计？【英文标题】：Why my "code" HTML element doesn't have the design set by AngularJS Material?为什么我的“代码”HTML 元素没有 AngularJS Material 设置的设计？ 【发布时间】：2020-10-17 05:30:12 【问题描述】：

在 AngularJS Material 的官方网站上，我在笔记本电脑上尝试了这个演示：AngularJS Material | Custom Separator Keys。一切都很好，除了我的<code> html 元素标签没有得到正确的 CSS 样式。我检查了元素，这应该是实际样式（如 AngularJS Material Demo 和 codepen 中的结果）：

我不知道我的代码有什么问题。在我的<code> 元素标记中出现问题可能意味着如果我在代码中使用其他 HTML 元素（未获得 AngularJS 材料设计），情况可能相同。

附言。我的代码与演示不同，因为我必须更改代码的格式才能使其工作（我不知道为什么我不能直接注入“自调用函数方式”到我的控制器。我必须先创建一个模块，然后才能将它与我的控制器连接）

这是我的代码：



  首页 | AngularJS 材料设计（实践）
    .chipsdemoCustomSeparatorKeys h2 
      边距底部：0；
    
  



  
    

        使用 md-separator-keys 自定义触发芯片创建的键码。
      

      
        您可以使用 Enter 或 Comma 键来触发芯片创建。
      
添加自定义分隔键代码，例如电子邮件的分号。

      
        您可以使用分号、Enter 或逗号键来触发芯片创建。
      内容>
  

  
    var app1 = angular.module('MyApp', ["ngMaterial"]);

    app1.controller('CustomSeparatorCtrl', DemoCtrl);

    函数 DemoCtrl($scope, $mdConstant) 
      $scope.keys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA];
      $scope.tags = [];

      // 任何键码都可以用来创建自定义分隔符
      var 分号 = 186;
      $scope.customKeys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA, 分号];
      $scope.contacts = ['test@example.com'];
    
  脚本>
正文>
【参考方案1】：

<code> 的样式来自我们的documentation site's CSS，而不是来自angular-material.min.css 文件。

如果将以下内容添加到index.html 的<head>，您应该会看到该样式应用于<code> 块（以及一系列元素和类的许多其他样式）。

  <link rel="stylesheet" href="https://material.angularjs.org/1.1.24/docs.css">

【讨论】：

以上是关于为啥我的“代码”HTML 元素没有 AngularJS Material 设置的设计？的主要内容，如果未能解决你的问题，请参考以下文章

为啥“width: auto”属性对 Angular mat-table 元素没有影响？

为啥我的浏览器元素没有显示我的 html 字符串？

为啥媒体查询在 Angular8 中不起作用

为啥订阅在 Angular 中没有 Observable 的情况下工作

为啥 angular.js 在添加动态元素时不够聪明，无法编译 DOM？

为啥我的“onclick()”事件在 Angular 中不起作用？