Question

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

=======

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

以下是我的代码的一部分

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

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

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

在子控制器中，我将数据推送到'subNav＆＃39; ng-repeat

使用的数组

        /*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');
                })  
        }

Answer 1

默认情况下，您无法访问父级范围。您需要执行类似这样的操作才能访问父作用域的subNav变量：

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

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

您可以详细了解here。

Answer 2

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

基本原则如下：

ParentContoller - ＆gt;服务 - ＆gt; ChildController

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

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

Answer 3

在您的回复中使用$ 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');
                })  
        }

角度ng-repeat在子控制器中不起作用

3 个答案: