Angular 1 个自定义指令未执行

Question

我的指令定义如下：

'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>

但是我的指令没有执行。甚至 link 函数内外的 console.log 语句也不起作用。 1. 我使用指令的方式是否正确？ 2. 如果是，请问是什么原因造成的？

Answer 1

在 HTML 中，指令名称需要采用 kebab-case，而不是驼峰式命名。

 <!-- 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 Developer Guide - Directive Normalization

Answer 2

指令：针对 ng-repeat 的最后一次观看。 app.directive('afterLast',函数(){ return{ 限制：'A'，范围： {}， link: 函数（作用域、元素、属性）{ 如果（attrs.ngRepeat）{ 如果（范围。$parent.$last）{ 如果 (attrs.afterLast !== '') { if (typeof scope.$parent.$parent[attrs.afterLast] === 'function') { // 执行定义的函数 scope.$parent.$parentattrs.afterLast; } 别的 { // 对于观察者，如果你愿意 scope.$parent.$parent[attrs.afterLast] = true; } } } } 别的 { 扔'ngRepeatEndWatch: ngRepeat Directive required to use this Directive'； } } } });

上次调用函数调用

$scope.layoutDone = 函数 () {

你想要的数据在这里

}

html

Angular 1 个自定义指令未执行

Angular 1 custom directive not executing

javascript

angularjs

angular-directive