gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 19:46:51 28 4
gpt4 key购买 nike

我正在使用 ng-repat 指令在我的 HTML 中动态放置我的自定义指令。

但是自定义指令没有被评估,如果直接在 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);

我相信存在一些编译问题,我在网上搜索并发现 $compile 可以解决我的目的但无法实现。

请帮助我解决我的问题。

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

最佳答案

将指令用作类是不好的做法(因为不可读) 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-repeat 循环中使用它们,您可以检查 var = "direct"或 "indirect"

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

关于javascript - 使用 ng-repeat 在 Angular 1.5.8 中放置自定义指令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39347970/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com