AngularJs从嵌套的NG控制器中调用NG-Change的外部控制器

Question

我正在尝试使用angularjs创建一个执行以下操作的页面：

1. 最初是空的，保存为自动的下拉列表填充应用程序。
2. 选择其中一个应用程序后，将从页面的另一个控制器。

我成功地使下拉列表自动填充。但是，我遇到的问题是通过NG-Change制作页面，这是由于嵌套的NG-Controllers造成的。在我的浏览器中，根本没有调用ChartAppSuccessfullogins功能。谁能帮我？代码如下：

我的主HTML页面。注意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>

我获取所有应用程序控制器。上面的HTML页面依赖于此来填充下拉列表。

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()
        });
    };
}]);

定义图表的控制器的一部分。它很长，所以我没有包含无关的代码。

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

Answer 1

在控制器文件中的chartsuccessfulapploginsController中您的allappsController是吗？

应该在内部，因为 allappsController是儿童范围，而 chartsuccessfulapploginsController是 parent scope 。您正在尝试从子范围访问 parent范围。

如果不在内部，它认为ng-change="chartsuccessfulapploginsController.add(value)"是一个新的控制器。

如果是问题，那么修复程序将是这样的：

    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(){ ... };
           }]);
}]);

检查一下：在Nested AngularJS控制器中使用NG模型