Question

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

有效的代码如下所示：

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

我想用{/ 1>替换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

提前为愚蠢道歉。欢呼声。

Answer 1

只是有几件事情使得它不能正常工作：

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

这是working directive：

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);
      };
    }
  };
});

如何在自己的指令中重用angularjs指令

1 个答案: