AngularJS äußere Steuerung von verschachtelten ng Controller mit ng Wechsel Aufruf

Question

Ich versuche AngularJS zu verwenden, um eine Seite zu erstellen, geschieht Folgendes:

1. zunächst leer ist, für eine Dropdownlist zu speichern, die automatisch ist besiedelte mit Apps.
2. nach der Auswahl einer dieser Anwendungen, Daten darüber von anderen Controller auf der Seite aufgerufen werden.

Ich war erfolgreich in der Lage, die Dropdown-Liste automatisch zu füllen. Ich habe jedoch Probleme damit, die Seite mit ng-change zu erstellen, was an den verschachtelten ng-Controllern liegt. Die Funktion chartappsuccessfullogins wird in meinem Browser gar nicht aufgerufen. Kann mir jemand helfen? Code ist unten:

Meine Haupthtml Seite. Beachten Sie die Verwendung von 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> 

Ich bekomme alle Apps Controller. Die obige HTML-Seite verlässt sich darauf, um die Dropdown-Liste zu füllen.

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

    }; 
}]); 

Teil des Controllers, der das Diagramm definiert. Es ist ziemlich lang, also habe ich den irrelevanten Code nicht hinzugefügt.

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

     $scope.add = function(APPID) { 

...} 

Answer 1

Ist Ihr allappsController in Ihrem chartsuccessfulapploginsController in Ihrem Controller-Datei?

Es sollte drin sein, weil allappsController der Umfang Kind ist und chartsuccessfulapploginsController ist der geordneten Bereich. Sie versuchen, auf den übergeordneten Bereich aus dem untergeordneten Bereich zuzugreifen.

Wenn es nicht drinnen ist, denkt es, dass ng-change="chartsuccessfulapploginsController.add(value)" ein neuer Controller ist.

Wenn das das Problem ist, würde das Update so etwas wie diese:

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