Angular 1 benutzerdefinierte Richtlinie nicht ausführen

Question

Ich habe meine Richtlinie wie folgt definiert:

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

Und ich benutze es als ein Attribut wie folgt:

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

Aber meine Richtlinie wird nicht ausgeführt. Selbst die console.log-Anweisungen innerhalb und außerhalb der Link-Funktion funktionieren nicht. 1. Benutze ich Direktiven richtig? 2. Wenn ja, was könnten die Gründe dafür sein, dass es nicht funktioniert?

Answer 1

In der HTML muss der Direktivenname in Kebab-Fall sein, nicht 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> 

Weitere Informationen finden Sie AngularJS Developer Guide - Directive Normalization

Answer 2

Richtlinie: für letzte Uhr von ng-repeat .. app.directive ('nach Last', function() { return { einschränken: 'A' , -umfang: {}, Link: function (Umfang, Element, attrs) { if (attrs.ngRepeat) { wenn { if (attrs.afterLast == '' (scope $ parent $ zuletzt..)!) { if (typeof scope. $ Parent. $ Parent [attrs.afterLast] === 'functio n ') { // Führt eine definierte Funktion aus scope. $ parent. $ parentattrs.afterLast; } sonst { // Für Beobachter, wenn Sie Bereich bevorzugen. $ Parent. $ Parent [attrs.afterLast] = true; } } } } else { throw 'ngRepeatEndWatch: ngRepeat Richtlinie zur Verwendung dieser Richtlinie erforderlich; } } } });

Funktionsaufruf letzter Anruf

$ scope.layoutDone = function() {

Sie Ihren Wunsch, Daten hier

}

html

{{Modulname | Großbuchstaben: true}} {{topicObject.name | Großbuchstaben: true}} {{learningPointObject.name | kapitalisieren}}

---