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

时间:2013-05-11 06:12:42

标签: angularjs angularjs-directive

我正在练习在不使用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

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

1 个答案:

答案 0 :(得分:1)

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

  1. $compile接受一些HTML并返回一个链接函数,该函数使用scope调用,以将编译的DOM链接到给定的范围。
  2. 您需要从DOM中删除viewing属性,否则当您使用$compile重新编译元素时,会启动无限循环。
  3. 这是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);
          };
        }
      };
    });