为什么我的“代码”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'];
    }
  脚本>
正文>

标签： angularjs angularjs-material

【解决方案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">

【讨论】：