Question

我遇到过角度和ui-bootstrap的问题，我不确定我是否有优雅的解决方案。

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

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

因此，我不确定这是否是最佳解决方案，即使它似乎完美无缺？如果您有更多嵌套范围怎么办？你需要调用$ parent。$ parent。$ parent.test来访问主控制器范围内的数据吗？

由于

＆＃13;

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

＆＃13;

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

＆＃13;

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

角度范围嵌套在包含分页的ui bootstrap选项卡中

1 个答案: