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

Question

考虑 angularjs 中的自定义指令：

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

据我所知，标签<my-dir></myDir> 没有关联的默认样式（或者，至少，它不是块标签）。现在我想设置它的样式并将其放置在页面的正确位置。我有 2 个选择：

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) 这导致我在 post-link 函数中添加样式：

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

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

更新：

在指令定义中使用replace: true 不是一种选择，因为它已被弃用，并且在使用引导程序时，<my-dir class="visible-xs"></my-dir> 之类的东西可能很有用。

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

注意

根据 Angular Docs replace 选项已在 Angular2 中被弃用， 但在你的情况下，你可以避免这种情况。

但是，如果您真的想避免使用指令的replace 选项，那么我建议您将指令用作属性而不是使用element，但是您需要使用<div class="layout">外面然后你可以把你的指令放在上面，比如<div class="layout" my-dir>。但是，如果您再次从 Angular2 的角度考虑它，您正在使用 attribute/class

将组件结构更改为旧的角度方式