Direktive in Angular nicht erhalten DATEN

Question

Meine Anweisung erhält keine Daten. In der Konsole bekomme ich die gesamten Items: undefiniert. Es ist egal, auch wenn ich eine Nummer oder einen Wert von meinem Controller übergebe. Ich bekomme auch keine Werte bei meiner Vorlagen-URL. Vielen Dank im Voraus.

(function(){ 
    'use strict'; 
    angular 
     .module('adminApp') 
     .directive('pagination', paginate); 

    function paginate() { 
     return { 
      restrict: 'A', 
      scope: { 
       totalItems: '=', 
       itemsOnPage: '=', 
       pageUrl:   '=', 
       currentPage: '=' 

      }, 
      templateUrl: 'assets/js/admin/templates/pagination-template.html', 
      link: function(scope, element, attrs){ 
       console.log("Total Items: ",scope.totalItems); 
      }, 
     }; 
    } 
})(); 

HTML:

<div ng-if="vm.promiseReady"> 
    <div pagination totalItems="300" pageUrl="vm.pageUrl" currentPage="vm.currentPage"></div> 
</div> 

HTML-Vorlage:

<div class="pagination"> 
<div class="pagination-bttns"> 
    <a class="pagination-bttn" 
     href="#" 
     ng-if="currentPage != 1" 
     ng-href="{{pageUrl}}{{currentPage-1}}" 
    > 
    PREVIOUS {{totalItems}} 
    </a> 

    <a class="pagination-bttn" 
     href="#" 
     ng-if="currentPage != totalItems" 
     ng-href="{{pageUrl}}/{{currentPage+1}}" 
    > 
    NEXT 
    </a> 
</div> 

Answer 1

vom angular documentation auf Richtlinien Genommen, in dem Abschnitt mit dem Titel "Normalisierung".

Angular normalisiert den Tag und den Attributnamen eines Elements, um festzustellen, welche Elemente mit welchen Direktiven übereinstimmen. In der Regel verweisen wir auf Direktiven anhand des normalisierten camelCase-Namens (z. B. ngModel). Da HTML jedoch die Groß- und Kleinschreibung nicht berücksichtigt, verweisen wir im DOM auf Anweisungen im Kleinbuchstabenformat, in der Regel mit durch Trennzeichen getrennten Attributen auf DOM-Elementen (z. B. ng-Modell).

Versuchen

<div pagination totalItems="300" pageUrl="vm.pageUrl" currentPage="vm.currentPage"></div> 

bis (Beachten Sie die dash-delimited Attribute jetzt) ​​

<div pagination total-items="300" page-url="vm.pageUrl" current-page="vm.currentPage"></div> 

weil Dies ist Swapping, wie die Dokumentation sagt, alle HTML-Attribute mit Bindestrich getrennte statt camelcase sein muss .

Answer 2

Der Gültigkeitsbereich der Direktive erwartet, dass eine Variable bindet. Sie haben einfach einen Attributwert hinzugefügt. So etwas wird es beheben.

<div ng-if="vm.promiseReady"> 
    <div pagination ng-init="vm.totalItems=300" total-items="vm.totalItems" pageUrl="vm.pageUrl" currentPage="vm.currentPage"></div> 
</div> 

oder

<div ng-if="vm.promiseReady"> 
    <div pagination total-items="300" pageUrl="vm.pageUrl" currentPage="vm.currentPage"></div> 
</div> 

    link: function(scope, element, attrs){ 
      scope.totalItems = parseInt(attrs.totalItems); 
      console.log("Total Items: ",scope.totalItems); 
     }, 

Im letzteren Fall, dass ich wahrscheinlich totalItems aus dem öffentlichen Raum für die Richtlinie allerdings entfernen würde.

Answer 3

In Html ändern Sie totalItems zu Gesamt-Elemente und andere Attribute ähnlich. Angular Directive wird Hash-separierte Texte in Scope-Objekten in Camelcase ändern. Also, Ihr neues HTML sollte sein:

<div ng-if="vm.promiseReady"> 
    <div pagination total-items="300" page-url="vm.pageUrl" current-page="vm.currentPage"></div> 
</div>