Angular 范围嵌套在 ui 包含分页的 bootsrap 选项卡中

Question

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

我有一个 UI Bootstrap 标签集，其中一个标签包含 table 和 UI Bootstrap 分页模板。

因为每个选项卡似乎都有自己的范围，table 行（使用 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>

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>

Angular 范围嵌套在 ui 包含分页的 bootsrap 选项卡中

Angular scope nesting in ui bootsrap tab containing pagination

angularjs

angular-ui-bootstrap