javascript - 如何处理angularjs中的css和自定义指令

Question

考虑 angularjs 中的自定义指令:

.directive('myDir', function() {
  return {
    restrict: 'E',
    template: "..."
  }
})

据我所见标签<my-dir></myDir>没有关联的默认样式(或者，至少，它不是 block 标记)。现在我想对其进行样式设置并将其放置在页面的正确位置。我有两个选择:

1) 使用此模板:

.directive('myDir', function() {
  return {
    restrict: 'E',
    template: "<div class="layout">...</div>",
  }
})

和CSS:

.layout {
    /* bla bla bla */
}

但是这在 DOM 3 中引入了一个新的不必要的层次，因为如果我写了类似 <my-dir class="layout"></my-dir> 的东西附加适当的 css 无论如何它都可以工作但是我必须记住每次使用时添加相同的 css 类 <my-dir>在我的代码中(这不是 DRY )。

2) 这导致我在后链接函数中添加样式:

.directive('myDir', function() {
  return {
    restrict: 'E',
    template: "...",
    link: function(scope, element, attrs) {
      element.addClass('layout');
    }
  }
})

哪种策略更好？有没有我看不到的优点或缺点？

更新:

使用 replace: true在指令定义中不是一个选项，因为它已被弃用并且在使用像 <my-dir class="visible-xs"></my-dir> 这样的 Bootstrap 时可能会有用。

Answer 1

你可以通过 replace: true 来解决这个问题指令中的选项，它基本上会用指令中提供的模板替换指令 DOM。

指令

.directive('myDir', function() {
  return {
    restrict: 'E',
    template: "<div class="layout">...</div>",
    replace: true //added replace true property
  }
})

结果 HTML

<div class="layout">..Content..</div>

如上所示，您可以通过简单地使用 replace 来摆脱不必要的 HTML 标签。指令选项。

Demo Plunkr

Note

As per Angular Docs replace option has been deprecated in Angular2, but in your case you can avoid that.

但是如果你真的想避免使用 replace指令选项，那么我建议您将指令用作属性，而不是使用 element但是你需要采取<div class="layout">在外面，然后你可以把你的指令放在上面，比如 <div class="layout" my-dir> .但是，如果您再次从 Angular2 的 Angular 考虑它，您将使用 attribute 将组件结构更改为旧的 Angular 方式。/class