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>  

但是我的指令沒有執行。 甚至鏈接功能內部和外部的console.log語句均不起作用。 1.我使用指令的方式正確嗎？ 2.如果是，它不起作用的原因可能是什么？

Answer 1

在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開發人員指南-指令規范化

Answer 2

指令：用於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 | 大寫}}

---