Question

当使用“测试AWS凭据”时，使用AWS SDK的新结果更新变量时，视图应更新创建模型文本框下方的列表;但事实并非如此。在尝试使用文本框创建新模型时，模型列表（在创建模型文本框下方）也会停止工作。造成这些问题的原因是什么？

AWS SDK将返回类似... {"TableNames":["Manufactures","Restaurants","Nutrition"]}

的结果

可以在此处看到演示：http://bghtrbb.github.io/AWS-API-Generator/app/index.html

源代码在这里：http://github.com/bghtrbb/AWS-API-Generator

如果您需要测试凭据，可以使用这些

访问密钥ID： AKIAJPEZZAC77Y7TPADA

秘密访问密钥： AxXXiNkQ9t7i10BHeLNC4y + XnVXryTzWGKYiSG +一

以下是Test AWS Credentials Button的控制器

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 Factory

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

最后这里是指令模板

<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

似乎是一个问题，新的数组被分配AngularJS搞砸了。为了解决这个问题，我已将apiGenerator.changeModelList()功能更改为...

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

并调用$scope.$apply();，其中apiGenerator.changeModelList(data.TableNames);在控制器中被调用。

它现在正常工作，但如果其他人可以提出不同（/更好）的解决方案，我希望听到它。

为什么AngularJS视图不会使用新数组更新？

1 个答案: