1

我正在做一个不使用 html 模板片段包装现有 ngDirective 的练习。在示例中，我只是重新利用ng-show. 我意识到这存在问题（例如硬编码item.viewing），您可能会问为什么，但除非有更好的习语，否则暂时将其搁置一旁。我看不到它不起作用-我添加了属性，然后将其编译到范围中。有范围问题吗？我看不出需要优先级或嵌入。

有效的代码如下所示：

<ul ng-repeat='item in collection'>
  <li ng-show='item.viewing'>text</li>
</ul>

我想li用

<li viewing>text</li>

这是 angularjs 指令代码：

app.directive('viewing', function($compile){
  return {
    restrict: 'A',
    compile: function(tElem, tAttrs){
      tAttrs.$set('ngShow', 'item.viewing');
      return function(scope, elem, attr){
        $compile(scope, elem, attr);
       };
     }
   };
});

这是一个工作版本： http: //plnkr.co/PjusCDkgt7PuXKtZowbH

提前为愚蠢道歉。干杯。

4

1 回答 1

1

只有几件事使它无法正常工作：

  1. $compile接受一些 HTML 并返回一个链接函数，该函数使用 a 调用以scope将编译后的 DOM 链接到给定范围。
  2. 您需要viewing从 DOM 中删除该属性，否则当您再次重新编译该元素并$compile启动无限循环时。

这是工作指令：

app.directive('viewing', function($compile){
  return {
    restrict: 'A',
    compile: function(tElem, tAttrs){
      tAttrs.$set('ngShow', 'item.viewing');
      tElem.removeAttr('viewing');
      return function(scope, elem, attr){
        $compile(elem)(scope);
      };
    }
  };
});
于 2013-05-11T06:44:43.363 回答