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模板：

<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

取自angular documentation on指令，标题为＆＃34;规范化＆＃34;。

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

尝试交换

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

to（现在注意dash-delimited属性）

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

这是因为，正如文档所说，所有HTML属性都必须用短划线分隔而不是camelCase。

Answer 2

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

Answer 3

指令的范围是期望绑定变量。您只需添加一个属性值。像这样的东西会解决它。

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

Angular中的指令没有得到DATA

3 个答案: