javascript - Angular Directive(指令)不应用样式

Question

我对 angularJs 指令的样式有疑问。我在我的元素中为进度条导入了一个 Bootstrap 指令。我在我创建的 div 类中使用它。

<div class="diagnostics-widget-modal">
    <div class="modal-header">
        <h3>SOME CONTENT</h3>
   </div>
   <div class="modal-body">
       <div class=left-workflow-area>
           <uib-progressbar value="55"></uib-progressbar>
       </div>
   </div>
</div>

当我运行我的页面时，指令 html 被正确呈现并且该段代码变为以下内容。

<div class="modal-body">
    <div class="left-workflow-area">
         <div class="progressbar ng-isolate-scope" value="55">
              <div class="progress">
                   <div class="progress-bar" ng-class="type &amp;&amp; 'progress-bar-' + type" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (percent < 100 ? percent: 100) + '%'}" aria-valuetext="%" aria-labelledby="" ng-transclude="" style="width: 100%;">    </div>
              </div>
         </div>
    </div>
</div>

我想要的是设计“progress”和“progress-bar”类的样式。我有一个 scss 定义左工作流区域。

 .diagnostics-widget-modal {
     height: 100%;
     width: 100%;

    .modal-header {
        height: 71px;
        padding: 0 12px 0px 36px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

       .modal-close {
          width: 72px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    }

   .modal-body {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     height: 90%;

    .left-workflow-area {
        display: flex;
        width: 70%;
        height: 100%;
     }

    .right-workflow-area {
       display: flex;
       width: 30%;
       height: 100%;
     }
 }

我有一个未应用的指令的样式文件。

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba (0,0,0,.1);
}

如果我声明“left-workflow-area”中的类被正确应用。但我想保留这种风格，因为这是一个将在我的应用程序的不同部分使用的指令。我该怎么做？

Answer 1

它在 .progress 位于 .left-workflow-area 时有效，因为它生成为 .left-workflow-area .progress其得分高于 bootstrap css 提供的默认 .progress。

如果当 .progress 在外面时它不起作用，它看起来像默认的 .progress 覆盖它。这可能是由于 bootstrap 的 css 包含在您自己的 html 页面或编译过程中的 css 之后。当 css 规则得分相同时，应用浏览器最后读取的内容。

因此，将 vendor 的样式置于您的样式之前应该可以解决您的问题。

另一个注意事项:在 .progress 中，背景颜色的规则中缺少一个分号。