CODEWITHSUNDEEP
javascriptangularjs
vincentf
vincentf

Reputation: 1499

Angular ng-repeat doesn't work in child controller

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

enter image description here

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

Upvotes: 0

Views: 329

Answers (3)

DKD
DKD

Reputation: 179

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

Upvotes: 0

jsternadel
jsternadel

Reputation: 56

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.

Upvotes: 1

Lucas Rodriguez
Lucas Rodriguez

Reputation: 1203

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.

Upvotes: 3

Related Questions