Angular ng-repeat 在子控制器中不起作用答案

【问题标题】：Angular ng-repeat doesn't work in child controllerAngular ng-repeat 在子控制器中不起作用
【发布时间】：2016-05-20 05:50:52
【问题描述】：

我正在做一个如下所示的角度页面，数据表部分属于ng-view（使用ngRoute），上面的导航栏属于index.html，它是父级。同样在子视图中，底部有一个导航栏。现在我想把这两个导航栏放在一起（将子导航栏移到 ng-view 之外）。我试图将子导航栏放入 index.html，然后 ng-controller='childController' ，它没有显示任何内容。

=======

如果我在数组中制作一些固定数据，那么它可以显示出来。但是在子控制器中动态生成的数据不起作用

这是我的部分代码

我把子导航栏放在index.html中，然后添加子控制器：

  <ul ng-controller="imagesController" >
     <li ng-repeat="y in subNav">{{y.name}}</li>
  </ul>

  <div><ng-view></ng-view></div>

在子控制器中，我将数据推送到 ng-repeat 使用的“subNav”数组

        /*clicking folder in datatable*/

        $scope.getInfo = function(index) {
            if($scope.applicationimages[index].type == 'folder') {
                $http({
                    method: 'GET',
                    url: $scope.url + '/' + $scope.applicationimages[index].name
                }).then(function(response) {

                    $scope.subNav.push({name: $scope.applicationimages[index].name, suburl: $scope.url});

                    $scope.url += '/' + $scope.applicationimages[index].name;
                    $scope.applicationimages = response.data.payload.list;
                }, function(response) {
                    console.log('http error');
                })                           
            } 
        }

        /*child navigation bar*/

        $scope.subNav = [];

        $scope.getCurrentNav = function(index) {
                $http({
                    method: 'GET',
                    url: $scope.subNav[index].suburl + '/' + $scope.subNav[index].name
                }).then(function(response) {

                    $scope.subNav.splice(index+1);

                    $scope.applicationimages = response.data.payload.list;
                    $scope.url = $scope.subNav[index].suburl + '/' + $scope.subNav[index].name;
                }, function(response) {
                    console.log('http error');
                })  
        }

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

在您的回复中使用如下 $scope.$apply

 $scope.getCurrentNav = function(index) {
                $http({
                    method: 'GET',
                    url: $scope.subNav[index].suburl + '/' + $scope.subNav[index].name
                }).then(function(response) {
  $scope.$apply(function () {
                    $scope.subNav.splice(index+1);

                    $scope.applicationimages = response.data.payload.list;
                    $scope.url = $scope.subNav[index].suburl + '/' + $scope.subNav[index].name;
})
                }, function(response) {
                    console.log('http error');
                })  
        }

【讨论】：

【解决方案2】：

我不建议使用 $scope.$parent。相反，我会创建一个服务。您可以在文档here 中了解它们。

基本原理如下所示：

ParentContoller --> 服务 --> ChildController

ParentController 将 ChildController 可能需要知道的任何内容保存到服务中。 ChildController 不再需要了解 ParentController。 ChildController 关心的只是从服务中获取数据，以便它可以完成工作。

使用 angularjs 的一大原因是为了实现关注点分离。通过使用 $scope.$parent 您正在创建两个紧密耦合的控制器。通过在两者之间提供服务，两个控制器都不必相互了解。这种方法应该提供更好的代码可维护性和重用性。

【讨论】：

感谢您的建议，稍后我会尝试服务，但这里我需要尽快完成

【解决方案3】：

默认情况下您无法访问父级的范围。您需要执行以下操作才能获取父范围的 subNav 变量：

$scope.$parent.subNav.splice(index+1);

否则，您将在子控制器范围内创建一个新变量subNav。

您可以阅读更多关于它的信息here。

【讨论】：