Angular 1 custom directive not executing

Question

I have my directive defined as follows:

'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'])   
                })
            }
        }
    }
}]);

And, I am using it as an attribute as follows:

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

But my directive is not executing. Even the console.log statements inside and outside the link function are not working. 1. Am I using directives the correct way? 2. If yes, what could be the reasons for it not working?

Answer 1

In the HTML the directive name needs to be in kebab-case, not 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>

For more information, see AngularJS Developer Guide - Directive Normalization

Answer 2

directive : for last watch of ng-repeat.. app.directive('afterLast',function(){ return { restrict: 'A', scope: {}, link: function (scope, element, attrs) { if (attrs.ngRepeat) { if (scope.$parent.$last) { if (attrs.afterLast !== '') { if (typeof scope.$parent.$parent[attrs.afterLast] === 'function') { // Executes defined function scope.$parent.$parentattrs.afterLast; } else { // For watcher, if you prefer scope.$parent.$parent[attrs.afterLast] = true; } } } } else { throw 'ngRepeatEndWatch: ngRepeat Directive required to use this Directive'; } } } });

function call on last call

$scope.layoutDone = function () {

you want your desire data here

}

html

{{module.name | capitalize:true}} {{topicObject.name | capitalize:true}} {{learningPointObject.name | capitalize}}

---