ng-click calling outer controller from nested ng-controllers

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-click, which I thing is due to the nested ng-controllers. 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) {

...}

What that part should do? value="{{data.availableOptions[Index].id ng-click="chartsuccessfulapploginsController.add(data.availableOptions[Index].id)"}} why ng-click under {{}} expression? — BotanMan
– BotanMan, Commented Jun 22, 2016 at 16:57
in any case it's better to use ng-options directive to work with selects properly and ng-model + ng-change to track updates docs.angularjs.org/api/ng/directive/ngOptions — BotanMan
– BotanMan, Commented Jun 22, 2016 at 17:07

Prabhjot Singh Rai · Accepted Answer · 2016-06-22 17:05:42Z

0

I think the problem is in your <option> tag. ng-click will not work with the this tag. According to the documentation, try using ng-change with the select tag as:

<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect" ng-change="functionToBeCalledWhenValueChanges(yourBindedElementValue)">

Hope this solves your problem.

answered Jun 22, 2016 at 17:05

Prabhjot Singh Rai

2,6355 gold badges38 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

James Falter Over a year ago

unfortuantely, no it didn't. updating to reflect the change.

Prabhjot Singh Rai Over a year ago

As I can see, you used the ng-change with the <option>. Use it inside the <select> tag.

Prabhjot Singh Rai Over a year ago

Did you debug your code? Did you see that your function chartsuccessfulapploginsController is being called? If yes, which it should, then what is the value variable that is being catched inside the function?

James Falter Over a year ago

thats not the name of the function. that's the name of the controller. add is the name of the function i'm trying to call inside that controller.

James Falter Over a year ago

chartsuccessfulapploginscontroller, that is.

|

Collectives™ on Stack Overflow

ng-click calling outer controller from nested ng-controllers

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related