Question

我很难理解数据绑定和服务在AngularJS中的工作原理。我有1个控制器和1个服务。

我的服务：

myAppServices.factory('SharedData',['$http',function($http){

    var _data = {
        "first_prop" :{
            "name": "first_prop",
            "info": "infofirst_prop"
        },
        "second_prop" :{
            "name": "second_prop",
            "info": "infosecond_prop"
        }

    };

    return {
        getProp:  function (name) {               
            return _data[name];
        },
        setProp: function (name,value) {
            _data[name] = value;
        }
    };

}])

我的控制器代码：

webAppControllers.controller('FirstCtrl', ['$scope', '$http','SharedData',
    function ($scope, $http,SharedData) {

        $scope.data = angular.copy(SharedData.getProp("first_prop"))

        $scope.print = function()
        {
            console.log(SharedData.getProp("first_prop"));
        }

        $scope.modify = function()
        {
            SharedData.setProp("first_prop",$scope.data)
        }


    }
]);

这是我的观点：

<form role="form">
                <div class="form-group">
                    <label for="nome">Name</label>
                    <input type="text" ng-model="data.name" class="form-control" id="name" placeholder="Modify the name...">

                </div>
                <div class="form-group">
                    <label for="info">Info</label>
                    <input type="text" ng-model="data.info" class="form-control" id="info" placeholder="Modify the info ...">
                </div>

                <button ng-click="modify()" class="btn btn-default">Modify</button>
                <button ng-click="print()" class="btn btn-default">Print</button>
            </form>

如果我修改视图，覆盖表单中的值，然后我点击打印按钮，console.log返回值存储在服务中（进入私有变量_data），这就是我所感谢的。

然后，如果我点击修改按钮，再次打印按钮，这次cosole.log会显示我在服务中保存在私有var _data上的修改值。此行为也是预期的。

在我与我的webapp进行此交互后，出现奇怪的事情，我再次修改表单中的值并单击打印按钮而不单击修改按钮。存储在服务中的值即使我从不单击修改按钮也会被修改，因此我从不调用SharedData.setProp（）方法。

使用angular.copy（）方法，我希望创建一个新变量（一个变量的新副本），所以如果我修改这个“$ scoped”变量我预计不可能直接修改我的私有_data变量服务。

为什么会这样？有没有一种方法只能通过某种定义的方法来修改和访问服务中的私有变量？

提前致谢。

最好的关注，的Alessandro。

Answer 1

单击setProp后，SharedData和范围中的对象是同一个对象。

要解决此问题，请在调用“modify（）”后再次调用此行：

$scope.modify = function()
{
   SharedData.setProp("first_prop",$scope.data)
   // grab another copy of the first_prop object, or else its the same reference.
   $scope.data = angular.copy(SharedData.getProp("first_prop"));
}

还有其他解决方法，例如在setProp中，传递angular.copy($scope.data)等。

始终要注意，当您在javascript中传递对象时，按引用传递，而不是按值传递。

使用Getter和Setter服务方法进行AngularJS数据绑定

1 个答案: