[英]Angular 1 custom directive not executing
我的指令定义如下:
'use strict;'
angular.module('clientApp')
.directive('afterLast', ['$ocLazyLoad','$timeout',function($ocLazyLoad, $timeout){
console.log('entered directive');
return {
restrict: 'A',
link: function(scope, elem, attr){
if (scope.$last === true){
console.log('entered directive')
$timeout(function(){
$ocLazyLoad.load(['some files'])
})
}
}
}
}]);
而且,我将其用作属性,如下所示:
<div ng-repeat="topicObject in module.topics track by $index" afterLast>
<div class="ft-section">
<div ng-repeat="learningPointObject in topicObject.learningPoints track by $index">
<div class="ft-page">
<h2 class="module-name" style="text-align: center;">{{module.name | capitalize:true}}</h2>
<h3 class="topic-name">{{topicObject.name | capitalize:true}}</h3>
<h4>{{learningPointObject.name | capitalize}}</h4>
<hr>
</div>
</div>
</div>
</div>
但是我的指令没有执行。 甚至链接功能内部和外部的console.log语句均不起作用。 1.我使用指令的方式正确吗? 2.如果是,它不起作用的原因可能是什么?
在HTML中,伪指令名称必须使用kebab-case,而不是camelCase。
<!-- ERRONEOUS camelCase
<div ng-repeat="topicObject in module.topics track by $index" afterLast>
-->
<!-- USE kebab-case -->
<div ng-repeat="topicObject in module.topics track by $index" after-last>
有关更多信息,请参见AngularJS开发人员指南-指令规范化
指令:用于ng-repeat的最后监视。app.directive('afterLast',function(){return {限制:'A',范围:{},链接:函数(作用域,元素,属性){if(attrs .ngRepeat){if(scope。$ parent。$ last){if(attrs.afterLast!==''){if(typeof scope。$ parent。$ parent [attrs.afterLast] ==='function'){ //执行定义的函数scope。$ parent。$ parentattrs.afterLast;} else {//对于观察者,如果您喜欢scope。$ parent。$ parent [attrs.afterLast] = true;}}}} else其他{throw'ngRepeatEndWatch :使用此指令所需的ngRepeat
指令';}}}});
最后一次调用函数
$ scope.layoutDone = function(){
你想要你的欲望数据在这里
}
html
{{module.name | capitalize:true}} {{topicObject.name | capitalize:true}} {{learningPointObject.name | 大写}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.