使用ng-repeat在Angular 1.5.8中放置自定义指令不起作用

我正在使用ng-repat指令在我的HTML中放置自定义指令。使用ng-repeat在Angular 1.5.8中放置自定义指令不起作用

但是，自定义指令不被评估，如果直接在HTML上放置相同的指令，那么它正在工作。

... 
    <body ng-app="docsSimpleDirective"> 
     <div ng-controller="Controller"> 
     <div>This is a Problem</div> 
    <!--Here in for loop i want to us the value to call a directive--> 

    <div ng-repeat="var in arr"> 

     <!--Here i am using directive with restrict: 'C' and this is not expending--> 
     <span class="{{var}}"></span> 
    </div> 


    <!-- here my directive named "direct" is working fine --> 
     <span class="direct"></span> 

    </div> 
    </body> 
...

和我的JS代码是

(function(angular) { 
    'use strict'; 
angular.module('docsSimpleDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
    $scope.arr = ['direct','indirect']; 
    }]).directive('direct', function() { 
    return { 
     template: 'direct', 
     restrict: 'C' 
    }; 
    }).directive('indirect', function() { 
    return { 
     template: 'indirect', 
     restrict: 'C' 
    }; 
    }); 
})(window.angular);

我相信有一些编译的问题，我搜索网页，发现$编译可以解决我的目的，但无法实施。

请帮我解决我的问题。

Plunker FPGA实现的相同：https://plnkr.co/edit/lYGg0UkQpNhN5NJx13Zj?p=preview

来源

2016-09-06 Shashank.gupta40

它不工作，因为当角解析器来'<跨度类= “{{VAR}}”>'其编译DOM＆值评估'{{VAR}}'值，即意思是在DOM编译之后'class'属性值被填满了，这就是为什么指令没有被编译。你可以通过使用'ng-switch' /'ng-if'指令来解决这个问题，在'ng-if' /'ng-switch'中把两个指令'direct'＆indendirect和一些'expression'放在一起。 –

使用指令作为一类是不好的做法，（因为无法读取） https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#restrict-to-elements-and-attributes

然后你传递一个指令为一类，但动态插值这本身是坏的练习（https://docs.angularjs.org/guide/interpolation#known-issues）。插入类名称并呈现该元素，但该指令在插值期间未编译。

从您的指令定义的限制线，并把它们作为属性：

<span indirect></span>

然后在NG-重复循环使用它们，你可以检查，如果VAR =“直接”或“间接”

https://plnkr.co/edit/JUNFMCZASMntCnC6FsIO?p=preview

来源

2016-09-06 12:03:34 gyc

ng -switch不会解决我的问题，因为实际上我必须遍历一个JSON并且有很大的no。的价值观。我已经想到了摆脱ng-switch的指令，截至目前我已经实现了ng-swich和ng-include指令来解决我的目的。 –

@ Shashank.gupta40与此相同http://stackoverflow.com/questions/38821980/how-to-write-directive-on-class-in-angular-js这是不可能的。看看$编译的情况下，但你最好重新考虑你正在构建的东西。 – gyc

使用指令这样

<div ng-repeat="var in arr"> <span direct ng-if="var == 'direct'"><span> <span indirect ng-if="var == 'indirect'"><span> <div>

并在控制器中将restrict定义为属性。

.directive('direct', function() { return { template: 'direct', restrict: 'A' };

来源

2016-09-06 12:19:08 shrish

使用ng-repeat在Angular 1.5.8中放置自定义指令不起作用

回答

相关问题