包含分页的ui引导选项卡中的角度范围嵌套答案

【问题标题】：Angular scope nesting in ui bootsrap tab containing pagination包含分页的ui引导选项卡中的角度范围嵌套
【发布时间】：2015-01-15 14:15:17
【问题描述】：

我遇到了 angular 和 ui-bootstrap 的问题，我不确定我是否有一个优雅的解决方案。

我有一个 UI Bootstrap 标签集，其中一个标签包含一个带有 UI Bootstrap 分页模板的表格。

由于每个选项卡似乎都有自己的范围，因此表行（使用 ng-repeat）必须引用 $parent.test 作为数据源，而不是直接引用变量名。

因此，我不确定这是否是最好的解决方案，即使它看起来工作得很好？如果您有更多嵌套范围怎么办？您是否需要调用 $parent.$parent.$parent.test 来访问主控制器范围内的数据？

谢谢

var testApp = angular.module('testApp', ['ui.bootstrap','testControllers']);
var testdata = 
[{'number': '1', 'name': 'A' }
,{'number': '2', 'name': 'B' }
,{'number': '3', 'name': 'C' }
,{'number': '4', 'name': 'D' }
,{'number': '5', 'name': 'E' }
,{'number': '6', 'name': 'F' }];

var testControllers = angular.module('testControllers', []);

testControllers.controller('TestListController', function($scope){
    $scope.totalItems = 6;
    $scope.page = 1;
    $scope.itemsPerPage = 2;
    $scope.getData = function () {
        $scope.test = [testdata[$scope.page*2-2],testdata[$scope.page*2-1]];
    };
    $scope.getData();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="testApp">
<div ng-controller='TestListController'>
    <tabset>
        <tab><tab-heading>Tab 1</tab-heading>
		<table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Name</th>
            </tr>
        </thead>
    
        <tbody>
            <tr ng-repeat="item in $parent.test">
                <td>
                    {{item.number}}
                </td>
                <td>
                    {{item.name}}
                </td>
            </tr>
        </tbody>
    </table>
	<pagination 
		total-items="$parent.totalItems" 
		ng-model="$parent.page" 
		max-size="5" 
		boundary-links="true" 
		ng-change="$parent.getData()" 
		items-per-page="$parent.itemsPerPage" 
		previous-text="<" next-text=">" 
		first-text="<<" last-text=">>">
	</pagination>
	</tab>
    </tabset>
</div>
</div>

【问题讨论】：

您可以使用$broadcast。这是一个很好的链接toddmotto.com/…

标签： angularjs angular-ui-bootstrap

【解决方案1】：

问题是您没有在 $scope.getData() 函数调用中保留对原始“this”上下文的引用。看看下面的代码：

我也建议你阅读这篇文章：Getting Out of Binding Situations in JavaScript

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script> 
        <meta charset="UTF-8">
        <title>Document</title>

        <script>
            var testApp = angular.module('testApp', ['ui.bootstrap','testControllers']);

            var testdata =
                [{'number': '1', 'name': 'A' }
                ,{'number': '2', 'name': 'B' }
                ,{'number': '3', 'name': 'C' }
                ,{'number': '4', 'name': 'D' }
                ,{'number': '5', 'name': 'E' }
                ,{'number': '6', 'name': 'F' }];


            var testControllers = angular.module('testControllers', []);

            testControllers.controller('TestListController', function($scope){

            // Pagination
            $scope.total = testdata.length;
            $scope.maxSize = 10;
            $scope.currentPage = 1;
            $scope.numPerPage = 2;

            $scope.getData = function () {

                // keep a reference to the current instance "this" as the context is changing
                var self = this;
                console.log(self.currentPage);
                var itemsPerPage = self.numPerPage; 
                var offset = (self.currentPage-1) * itemsPerPage;
                $scope.test = testdata.slice(offset, offset + itemsPerPage)

            };

            $scope.getData();
        });


        </script>
    </head>
    <body>

        <div ng-app="testApp">
            <div ng-controller='TestListController'>
                <tabset>
                <tab><tab-heading>Tab 1</tab-heading>
                    <table>
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Name</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr ng-repeat="item in test">
                                <td>{{item.number}}</td><td>{{item.name}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <pagination
                        total-items="total" 
                        ng-model="currentPage"
                        max-size="maxSize"
                        boundary-links="true"
                        ng-change="getData()"
                        items-per-page="numPerPage"
                        previous-text="<" next-text=">"
                        first-text="<<" last-text=">>">
                    </pagination>
                    <div>
                        Page: {{currentPage}}<br/>
                        Total Items: {{total}}                          
                    </div>
                </tab>
                </tabset>
            </div>
        </div>
    </body>
</html>

【讨论】：