1

我想构建一个简单的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>

这甚至可能吗？

4

3 回答 3

2

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

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 。

于 2013-09-05T15:50:23.150 回答
1

在编译/链接另一个指令时动态注入一个指令是一件麻烦事。您不能简单地设置属性，因为它不会被 Angular 收集。手动编译也不起作用，因为它会导致无限循环。话虽这么说，如果你已经决定这是你想要的:)，那么你去：

app.directive('hello', function($injector) {
  return {
    transclude: true,
    replace: true,
    restrict: "E",
    template: "<div ng-transclude></div>",
    compile: function(tele, tattrs) {
      var ngShow = $injector.get("ngShowDirective")[0];
      return function(scope, ele, attrs) {
        attrs.$set("ngShow", (attrs.foo === "bar").toString());
        ngShow.link(scope, ele, attrs);
      }
    }
  }
});

这个想法是手动链接ngShow指令而不是依赖 AngularJS 来做到这一点。通常，只有 AngularJS 调用compileand link; 另外，此代码依赖于ngShow具有link功能的知识。一般来说，它应该被认为是一种黑客攻击并谨慎使用。

演示链接

于 2013-09-05T15:52:52.683 回答
0

您应该能够将ng-show属性应用于hello元素并检查模型的属性以查看它是否应该被隐藏。

<hello ng-show="foo == 'bar'">
    <h1>Hi everyone!</h1>
</hello>

在此视图可访问的范围内，您将拥有一个 foo 属性。

$scope.foo = 'bar';
于 2013-09-05T15:16:13.513 回答