角度のディレクティブがデータを取得しない

Question

私のディレクティブはデータを取得していません。コンソールでは、私はその合計項目を得る：未定義。コントローラーから数値や値を渡しても同じです。テンプレートURLで値を取得することもできません。前もって感謝します。

(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テンプレート： "正規化" というタイトルのセクションでは、ディレクティブにangular documentationから撮影

<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

。

角度は、要素のタグと属性名を正規化して、どの要素がどの指令に一致するかを判断します。通常は、大文字と小文字を区別するcamelCaseの正規名（例：ngModel）でディレクティブを参照します。ただし、HTMLでは大文字と小文字を区別しないため、DOMのディレクティブを小文字の形式で指定します。通常、DOM要素のダッシュで区切られた属性を使用します（例：ng-model）。

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

ドキュメントが言うように、すべてのHTML属性は、ダッシュで区切られた代わりに、キャメルケースでなければならない、これは

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

（今dash-delimited属性に注目してください）に交換してみてください。

Answer 2

ディレクティブのスコープは、変数がバインドされることを期待しています。属性値を追加しただけです。これのようなものが修正されます。後者の場合

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

または

<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); 
     }, 

私はおそらくかかわらず、ディレクティブの公開範囲オフtotalItemsを削除します。

Answer 3

HTMLでtotalItemsを変更しても同様の項目と他の属性があります。 Angular Directiveは、スコープオブジェクト内でハム区切りのテキストをcamelcaseに変更します。新しいHtmlは次のようになります。

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