Angular ng-repeat doesn't work in child controller

Question

I'm doing an angular page as shown below, the datatable part belongs to ng-view(using ngRoute) and the navigation bar above belongs to index.html which is the parent. Also in the child view there is a navbar on the bottom. Now I want to put these two navbars together(move child navbar outside of ng-view). I've tried to put the child navbar into index.html, then ng-controller='childController' , it doesn't show anything.

=======

If I make some fixed data in the array then it can be displayed. But data which is generated dynamically in the child controller is not working

Here is part of my code

I put the child navbar in index.html, then add the child controller:

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

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

in child controller, I push data to 'subNav' array which is used by 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');
                })  
        }

score 3 · Accepted Answer · edited May 23 '17 at 12:01

3

You can't access parent's scope by default. You need to do something like this to get to the subNav variable of the parent scope:

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

Otherwise you will be creating a new variable subNav in the child controller scope.

You can read more about it here.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 10 '16 at 02:17

Lucas Rodriguez

1,203
6
15

score 1 · Answer 2 · answered Feb 10 '16 at 02:34

I wouldn't suggest using $scope.$parent. Instead I would create a service. You can read about them in the documentation here.

The basic principal looks like this:

ParentContoller --> Service --> ChildController

ParentController saves anything that ChildController might need to know about into the Service. ChildController no longer needs to know about ParentController. All ChildController cares about is getting data from the service so it can do its job.

One of the big reasons for using angularjs is to achieve separation of concerns. By using $scope.$parent you are creating two tightly coupled controllers. By having a service in between neither controller has to know about each other. This approach should provided for better code maintainability and reuse.

Thnaks for your suggestion, I'll try service latter on, but here I need to finish it asap — vincentf, Feb 10 '16 at 04:01

score 0 · Answer 3 · answered Feb 10 '16 at 03:46

use $scope.$apply as below inside your response

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

Angular ng-repeat doesn't work in child controller

3 Answers3