Angular中的指令没有得到DATA(Directive in Angular not getting DATA)

Angular中的指令没有得到DATA(Directive in Angular not getting DATA)

我的指令没有得到任何数据。 在控制台，我得到的总项目：未定义。 即使我从我的控制器传递一个数字或一个值，也是一样的。 我的模板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模板：

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

My directive is not getting any data. In console i get that total items: undefined. It's all the same even if i'm passing a number or a value from my controller. Nor do i get any values at my template URL. Thank you in advance.

(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 TEMPLATE:

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

最满意答案

从指令的角度文档中，在标准化部分。

Angular将元素的标记和属性名称标准化以确定哪些元素匹配哪些指令。 我们通常通过区分大小写的camelCase规范化名称（例如ngModel）来引用指令。 但是，由于HTML不区分大小写，因此我们通过小写形式引用DOM中的指令，通常使用DOM元素（例如，ng-模型）上由短划线定界的属性。

尝试交换

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

to（现在注意破折号分隔的属性）

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

这是因为，正如文档所述，所有的HTML属性都必须用短划线分隔，而不是驼峰式。

Taken from the angular documentation on directives, in the section titled "Normalization".

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

Try swapping

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

to (Notice the dash-delimited attributes now)

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

This is because, as the documentation says, all HTML attributes must be dash-delimited instead of camelCase.