2016-07-13 10 views
0

"AWS Credentialsのテスト"を押して変数をAWS SDKの新しい結果で更新すると、モデル作成テキストボックスの下のリストが更新されます。しかしそれはしません。テキストボックスを使用して新しいモデルを作成しようとすると、モデルリスト(モデル作成テキストボックスの下)も機能しなくなります。これらの問題の原因は何ですか? http://bghtrbb.github.io/AWS-API-Generator/app/index.htmlAngularJSビューが新しい配列で更新されないのはなぜですか?

ソースコードはここにある::http://github.com/bghtrbb/AWS-API-Generator

あなたが使用できるテストの資格情報が必要な場合は

AWS SDKのような... {"TableNames":["Manufactures","Restaurants","Nutrition"]}

デモはここで見ることができ、結果を返します

これら

アクセスキーID: AKIAJPEZZAC77Y7TPADA

秘密アクセスキー: AxXXiNkQ9t7i10BHeLNC4y + XnVXryTzWGKYiSG +ここ

がテスト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"); 
      } 
     }) 
    } 
}); 

ためのコントローラである。ここのためのディレクティブですapiGenerator工場

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

ですモデル一覧

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最後にここにディレクティブテンプレートがあります

<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> 

答えて

0

AngularJSが割り当てられている新しい配列に何らかの問題があるようです。 は、この問題を回避私はapiGenerator.changeModelList()機能に...

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

を変更し、apiGenerator.changeModelList(data.TableNames);がコントローラに呼び出された$scope.$apply();と呼ばれている取得します。

これは正常に動作していますが、他の誰かが別の(より良い)修正を提案できる場合は、それを聞きたいと思います。

関連する問題