angularjs调用从嵌套纳克控制器，NG-变化

Question

我试图用angularjs创建一个页面，执行以下操作外控制器：

1. 最初是空的，保存为一个下拉列表自动为 填充与应用程序。
2. 当选择其中一个应用程序时，关于它的数据将从 调用另一个控制器到页面。

我成功地获得了下拉列表来自动填充。然而，我有问题得到它与ng-change，这是由于嵌套ng控制器导致页面。 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

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

应该在里面，因为allappsController是子范围和chartsuccessfulapploginsController是父范围。您正试图从子范围访问父范围。

如果它不在里面，它认为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(){ ... }; 

      }]); 
}]); 

检查了这一点：Use ng-model in nested Angularjs controller