javascript - 自定义指令可以用包含 ng-show 的模板替换它的元素吗？

Question

我想构建一个简单的 hello像这样使用的指令:

<hello foo="bar"></hello>

如果foo属性等于“bar”，我想用 <div ng-show="true"></div>" 替换元素;否则，将其替换为 <div ng-show="false"></div>" .但是，我只想替换一个 hello元素，而不是嵌套在其中的任何子元素!

例如:

<hello foo="bar">
  <h1>Hi everyone!</h1>
</hello>

将被替换为:

<div ng-show="true">
  <h1>Hi everyone!</h1>
</div>

这甚至可以做到吗？

Answer 1

您可以通过使用嵌入来实现:

Javascript

app.directive('hello', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: { foo: '@' },
    template: '<div ng-show="foo == \'bar\'" ng-transclude></div>',
  };
});

HTML

<hello foo="bar">
  <h1>Hi everyone!</h1>
</hello>

<hello foo="baz">
  <h1>Hi everybody!</h1>
</hello>

工作 Plunker here .