Question

我正在阅读一个弹簧启动教程，它包含一个带有以下css的示例：

    <style type="text/css">
    [ng\:cloak], [ng-cloak], .ng-cloak {
      display: none !important;
    }
    </style>
    </head>

    <body ng-app="hello">
      <div class="container">
        <h1>Greeting</h1>
        <div ng-controller="home" ng-cloak class="ng-cloak">

我不知道斗篷课是为了什么。我只是想知道前两个奇怪的选择器的目的是什么？

TIA，奥莱

Answer 1

从角度documentation：

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

通过将您提到的css规则添加到页面来完成，其中[ng-cloak] - 是attribute selector，它按属性而不是类，ID或元素名称匹配元素：

<div ng-cloak>...</div>

修改：

在css规则中使用哪个选择器取决于您在html标记中使用的语法。可以通过不同的方式触发相同的指令 - 按元素名称，类名称或属性名称。您可以通过<div ng:cloak></div>方式启用此指令。那么仅在你的CSS中使用[ng\:cloak]选择器就足够了。

ngCloak指令的目的是在完成编译后删除ng-cloak类和属性（从而使元素可见）。

[ng \：cloak] [ng-cloak]选择器的目的是什么（包含在Spring Boot Security Tutorial中）？

1 个答案: