angularjs calling outer controller from nested ng controllers with ng-change

Question

I'm trying to use angularjs to create a page that does the following:

Is initially empty, save for a dropdownlist that is automatically populated with apps.
upon selecting one of those apps, data about it will be called from another controller to the page.

I was successfully able to get the dropdownlist to automatically populate. however, I'm having issues getting it to make the page with ng-change, which I thing is due to the nested ng-controllers. The chartappsuccessfullogins function is not being called at all in my browser. Can anyone help me? Code is below:

My main html page. Note the use of ng-init:

    <div ng-controller="chartsuccessfulapploginsController">
        <div ng-controller="allappsController" ng-init="add()">
            <form name="myForm">
                <label for="repeatSelect"> Repeat select: </label>
                <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect" ng-change="chartsuccessfulapploginsController.add(value)">
            <option ng-repeat="option in data.availableOptions" ng-init="Index = $index"  value="{{data.availableOptions[Index].id}}" ng-model="APPID" >{{data.availableOptions[Index].name}}</option>
        </select>
            </form>
            <hr>
            <p> {{data}}</p>
            <p> {{data.id[0]}}</p>
            <p> {{data.name[0]}}</p>

            <tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
        </div>
        <p>{{returnCount}}</p>
        <table border = "1">
            <tr>
                <td>{{chartObject.data}}</td>
                <td>{{returnCount}}</td>

            </tr>
        </table>
        <div google-chart chart="chartObject" style="height:600px; width:100%;"></div>
    </div>

My get all apps controller. The html page above relies on this to populate the dropdownlist.

angular.module('scotchApp').controller('allappsController',['$scope', function($scope){
    var userurl='';
    $scope.add = function(){

        userurl = 'http://localhost:8085/rest/uafapp/appslist';
        var userdata = {};
        var userconfig =
        {
            headers: {
                'Content-Type':'application/json'
            }
        };
        var userPostRequest = $.get(userurl, userdata, userconfig);
        var userjson = '{\"USER_DATA_RETRIEVED\" : \"fail\"}';
        userPostRequest.done(function(userdata){

            userjson = JSON.stringify(userdata);
            console.log("userjson :: " + userjson);

            var postResponse = jQuery.parseJSON(userjson);
            $scope.returnName = postResponse['apps'];
            var availableOptionsArray = [];

            for(i = 0; i < postResponse['apps'].length; i++){
                var availableOptions = {};
                availableOptions['id'] = postResponse['apps'][i]['appId'];
                availableOptions['name'] = postResponse['apps'][i]['appName'];
                availableOptionsArray[i] = availableOptions; 
            }
            var returnData = {};
            returnData['repeatSelect'] = null;
            returnData['availableOptions'] = availableOptionsArray;

            $scope.data = returnData;
            console.log($scope.returnData);
            $scope.$apply()
        });

    };
}]);

Part of the controller that defines the chart. It's pretty long, so I didn't include the irrelevant code.

   angular.module('scotchApp').controller('chartsuccessfulapploginsController',['$scope','$route','$http','AuthTokenService', function($scope, $route, $http, AuthTokenService){
        var appurl = '';
        var failedappurl= '';

        $scope.add = function(APPID) {

...}

The problem is you're not using controller aliases ex. `ng-controller="allappsController as allapps"`. and your init should then be ` ng-init="allapps.add()"` — Stubbies, Jun 22 '16 at 19:30

score 0 · Answer 1 · edited May 23 '17 at 10:29

Is your allappsController within your chartsuccessfulapploginsController in your controller file?

It should be inside because allappsController is the child scope, and chartsuccessfulapploginsController is the parent scope. You are trying to access the parent scope from the child scope.

If it is not inside, it thinks that ng-change="chartsuccessfulapploginsController.add(value)" is a new controller.

If that is the issue, the fix would be something like this:

    angular.module('scotchApp').controller('chartsuccessfulapploginsController',['$scope','$route','$http','AuthTokenService', function($scope, $route, $http, AuthTokenService){
            var appurl = '';
            var failedappurl= '';

            $scope.add = function(APPID) {} ...


            //allappsController inside chartsuccessfulapploginsController
            angular.module('scotchApp').controller('allappsController',['$scope',function($scope){
            var userurl='';
            $scope.add = function(){ ... };

           }]);
}]);

Check this out: Use ng-model in nested Angularjs controller

You are not using the ng-model, the question is similar in the fact that you are both trying to access a outer controller from an inner controller. Your HTML is fine, since your ng-change using hartsuccessfulapploginsController is nested within your inner controller (allappsController). Let me know if I misunderstand your question in your comment. — robert.otherone, Jun 22 '16 at 19:39

angularjs calling outer controller from nested ng controllers with ng-change

1 Answers1