Question

我是否可以使用angular ui指令作为属性或类而不是元素？

例如：

<ul class="accordion">
    <li class="accordion-group">
        my content
    </li>
</ul>

Answer 1

是的，你可以做:)。

Angular指令在外观方面有四种风格。

新的HTML元素（<date-picker></date>）。
元素（<input type="text" date-picker/>）的属性。
作为一个班级（<input type="text" class="date-picker"/>）。
作为评论（）。

var app = angular.module('myapp', []);
app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<h3>Hello World!!</h3>'
  };
});

restrict - 这提供了一种指定如何在HTML中使用指令的方法（记住指令可以以四种方式出现）。在这种情况下，我们将其设置为“AE＆＃39;”。因此，该指令可以用作新的HTML元素或属性。为了允许将此指令用作类，我们可以将限制设置为＆＃39; AEC＆＃39;。
template - 这指定了Angular编译和链接指令时将生成的HTML标记。这不一定是一个简单的字符串。模板可能很复杂，通常涉及其他指令，表达式（{{}}）等。在大多数情况下，您希望使用templateUrl而不是模板。因此，理想情况下，您应该将模板放在单独的HTML文件中，并使templateUrl指向它。
replace - 指定生成的模板是否将替换附加指令的HTML元素。在我们的例子中，我们使用了指令as，并将replace设置为true。因此，在编译指令之后，生成的输出模板将替换。最终输出为<h3>Hello World!!</h3>。如果将replace设置为false（缺省值），则输出模板将插入到调用该伪指令的元素中。

检查此plnkr

了解更多信息，请访问Documentation

Angular ui指令作为属性

1 个答案: