Question

我对AngularJS（来自Java和JQuery背景）非常陌生，并试图理解做所有事情的“角度方式”，特别是指令。

我想帮助理解我应该在哪里放置一些辅助函数（不是特定于特定的控制器），这些函数可以由我的指令使用的模板代码调用。在这种情况下，我的函数只能由模板使用（因此指令）。

具体示例：我将有许多我想要分页的表。分页对每个表都有类似的作用。每个表都有自己的控制器来从服务器获取数据。所以，我假设一个指令是重用代码的好方法。

我创建了一个指令＆amp;一个模板，它使用特定数据显示Next和Previous分页链接。他们运作良好。

问题：在下面的代码中，我应该在哪里放置isFirstPage（页面）和isLastPage（页面）的定义？我不希望它们在每个需要分页的表的每个控制器上。我也认为最好在全球范围内定义它们，因为它们只与分页相关。看来我应该能够直接在指令中定义它们。我尝试在链接功能中定义它们。这种方式有效，但是当加载视图时，它们被称为远远超过预期的3次（大约10-20）。另外，有几次在控制台中显示错误（无法读取未定义的属性'数'）。并且，文档说链接函数主要用于操作DOM。由于所有这些原因，似乎链接函数可能是定义它们的错误位置。

指令：

.directive('pagination', function() {
    return {
        restrict: 'E',
        templateUrl: 'shared/partials/pagination-links.html'
});

样本控制器（相关部分） - 所有类似于不同的默认排序＆amp;页面大小＆amp;服务。在这里，我定义了在指令模板中使用的$ scope.page和$ scope.paginationBaseUrl，因为它们包含特定视图和表的数据。这些都很有效。

var table1Controllers = angular.module('rmApp.table1Controllers', ['rmApp.Table1Services']);

table1Controllers.controller('Table1Controller', ['$scope', '$location', 'Table1Service'
                                        function ($scope, $location, Table1Service) {

    var search = $location.search();
    var page = search.page||0;
    var size = search.size||20;
    var sort = search.sort||'id,asc';

    var table1Page = Table1Service.get({page:page, size:size, sort:sort}, function() {
        $scope.page = table1Page.page; //this is an object from server with several attributes 
        $scope.paginationBaseUrl = $location.path() + "?size=" + size + "&sort=" + sort;
    });
}]);

查看HTML：只需在表后调用该指令： ...

模板HTML片段（理想）。 page和paginationBaseUrl是（并且必须）在每个控制器上使用其特定数据定义的。这是一个片段。我在页面对象上使用了更多属性。我的问题是在哪里定义isFirstPage（页面）和isLastPage（页面）：

<nav>
        <li ng-class="{disabled: **isFirstPage(page)**}">
            <a ng-show="!isFirstPage(page)" ng-href="#{{paginationBaseUrl}}&page={{page.number - 1}}">Prev</a>
            <span ng-show="isFirstPage(page)">Prev</span>
        </li>
        <li ng-class="{disabled: **isLastPage(page)**}">
            <a ng-show="!isLastPage(page)" ng-href="#{{paginationBaseUrl}}&page={{page.number + 1}}">Next</a>
            <span ng-show="isLastPage(page)">Next</span>
        </li>
    </ul>
</nav>

我想打电话的功能，例如： isFirstPage：function（pageInfo）{ return pageInfo.number === 0; }

在这种情况下，这些功能非常基本＆amp;我可以对它们进行硬编码，但我知道我会遇到类似的问题，所以我想知道正确的方法。如果有更好的方法来完成像这个分页指令这样的事情，也请告诉我。也许ngInclude？

Answer 1

你得到的方法被调用两到三次的行为是可以的。从角度文档：

{{}}是一种指定数据绑定位置的声明方式在HTML中。 AngularJS会在任何时候自动更新此文本 {{}}内的函数返回值更改。

因此，您可以将这些函数保存在指令的link函数中，只需处理空值。

角度UI团队已经为此版本提供了可用的东西。看看：http://angular-ui.github.io/bootstrap/#/pagination

AngularJS在指令模板中调用常用函数

1 个答案: