Warum wird die AngularJS-Ansicht nicht mit einem neuen Array aktualisiert?

Question

Wenn eine Variable mit neuen Ergebnissen aus dem AWS SDK aktualisiert wird, indem Sie auf "Test AWS Credentials" klicken, sollte die Ansicht die Liste unter dem Textfeld zum Erstellen des Modells aktualisieren. aber es tut es nicht. Die Modellliste (unter dem Textfeld zum Erstellen eines Modells) funktioniert ebenfalls nicht mehr, wenn Sie versuchen, neue Modelle mithilfe der Textbox zu erstellen. Was verursacht diese Probleme?

AWS SDK wird ein Ergebnis zurück, wie ... {"TableNames":["Manufactures","Restaurants","Nutrition"]}

Eine Demo hier zu sehen ist: http://bghtrbb.github.io/AWS-API-Generator/app/index.html

Der Quellcode ist hier: http://github.com/bghtrbb/AWS-API-Generator

Wenn Sie Testanmeldeinformationen benötigen, können Sie verwenden diese

Access Key ID: AKIAJPEZZAC77Y7TPADA

Geheimschlüssel: AxXXiNkQ9t7i10BHeLNC4y + XnVXryTzWGKYiSG + a

Hier ist der Controller für das Button-Credentials-Test AWS

var app = angular.module("app", []); 

app.controller("awsCredentialsTester", function($scope, apiGenerator) 
{ 
    $scope.AwsCredentials = { 
     apiKey: '', 
     apiSecret: '' 
    }; 
    $scope.testAwsCredentials = function() 
    { 
     AWS.config.update({ 
      accessKeyId: $scope.AwsCredentials.apiKey, 
      secretAccessKey: $scope.AwsCredentials.apiSecret 
     }); 
     AWS.config.region = 'us-east-1'; 

     var dynamodb = new AWS.DynamoDB(); 
     dynamodb.listTables({}, function(err, data) 
     { 
      if (err) 
      { 
       console.log(err, err.stack); // an error occurred 
       swal("Oh No!", err + "<br/>" + err.stack, "error"); 

       AWS.config.update({ 
        accessKeyId: "", 
        secretAccessKey: "" 
       }); 
      } 
      else 
      { 
       apiGenerator.apiKey = $scope.AwsCredentials.apiKey; 
       apiGenerator.apiSecret = $scope.AwsCredentials.apiSecret; 
       apiGenerator.changeModelList(data.TableNames); 

       console.log(data); // successful response 
       swal("Success!", JSON.stringify(data), "success"); 
      } 
     }) 
    } 
}); 

Hier ist die apiGenerator Fabrik

angular.module('app').factory("apiGenerator", function() { 
    var apiGenerator = {}; 

    apiGenerator.apiKey = ""; 
    apiGenerator.apiSecret = ""; 

    apiGenerator.models = []; 
    apiGenerator.resources = []; 

    apiGenerator.addNewModel = function (newModelName) { 
     apiGenerator.models.push(newModelName); 
     1+1; 
    }; 

    apiGenerator.changeModelList = function (newModelList) { 
     apiGenerator.models = newModelList; 
     1+1; 
    }; 

    return apiGenerator; 
}); 

Hier ist die Richtlinie für die Modellliste

angular.module('app').directive("modelOverview", ['apiGenerator', function(apiGenerator) 
{ 
    return { 
     restrict: 'AE', 
     scope: true, 
     link: function (scope, element, attrs) { 
      scope.modelOverview = { 
       newModelName: "", 
       models: [] 
      }; 

      scope.$watch("models", function (models) { 
       scope.modelOverview.models = apiGenerator.models; 
      }); 

      scope.addNewModel = function() { 
       apiGenerator.addNewModel(scope.modelOverview.newModelName); 
       scope.modelOverview.newModelName = ""; 
      }; 

      element.bind("keypress", function (event) { 
       if(event.which === 13) { 
        scope.addNewModel(); 
       } 
      }); 
     }, 
     templateUrl: 'assets/components/model_overview/model_overview_directive_template.html' 
    }; 
}]); 

A Und schließlich ist hier die Richtlinie Vorlage

<div class="col-md-4"> 
    <form> 
     <div class="input-group"> 
      <div class="input-group-addon"><span>Create Model:</span></div> 
      <input class="form-control" type="text" ng-model="modelOverview.newModelName"> 
      <div class="input-group-btn"> 
       <button class="btn btn-info" type="button" ng-click="addNewModel()" >Go!</button> 
      </div> 
     </div> 
    </form> 
    <ul class="list-group" id="model-list"> 
     <li class="list-group-item" ng-repeat="model in modelOverview.models"><span> {{model}} </span></li> 
    </ul> 
    <span>{{modelOverview.models}}</span> 
</div> 

Answer 1

Scheint ein Problem mit dem neuen Array sein AngularJS zugeordnet werden vermasselt. Um dies um ich mich verändert habe apiGenerator.changeModelList() Funktion ...

apiGenerator.changeModelList = function (newModelList) { 
     apiGenerator.models.splice(0, apiGenerator.models.length); 
     Array.prototype.push.apply(apiGenerator.models, newModelList); 
    }; 

Und genannt $scope.$apply(); wo die apiGenerator.changeModelList(data.TableNames); in der Steuerung aufgerufen wird.

Es funktioniert jetzt richtig, aber wenn jemand anderes eine andere (/ bessere) Lösung vorschlagen könnte, würde ich es gerne hören.