Question

我尝试在两个控制器之间共享数据时遇到问题。这是我的代码：

<html>
<head>
    <title>My Angular App</title>
</head>
<body ng-app="MyTest">

<div ng-controller="ViewController as vmView">
    <ul>
        <li ng-repeat="singleItem in vmView.allData">
            {{ singleItem }}
        </li>
    </ul>

    {{ vmView.checkItOut }}

    <input type="button" ng-click="vmView.justClick()" />
</div>

<div ng-controller="AddController as vmAdd">
    <form ng-submit="vmAdd.saveChanges()">
        <input type="text" ng-model="vmAdd.inputText" />
        <input type="submit" />
    </form>
</div>

<script src="angular.js"></script>
<script src="app.js"></script>
<script type="application/javascript">
    angular.module('MyTest')
            .factory('shareDataFactory', function($http, $q) {
                var data = {};

                data.list = $q.defer();

                data.getAllData = function() {
                    $http.get('http://www.w3schools.com/angular/customers.php')
                            .then(function(response) {
                                data.list = $q.resolve(response.data.records);
                            });

                    return data.list.promise;
                };

                data.addData = function(newData) {
                    data.list.push(newData);
                };

                return data;
            });

    angular.module('MyTest')
            .controller('ViewController', function ViewController(shareDataFactory) {
                var vm = this;

                vm.allData = shareDataFactory.getAllData();

                vm.checkItOut = "Just checking ..";

                vm.justClick = function() {
                    console.log(vm.allData);
                }
            });

    angular.module('MyTest')
            .controller('AddController', function AddController(shareDataFactory) {
                var vm = this;

                vm.inputText = "Hello";

                vm.saveChanges = function() {
                    shareDataFactory.addData(vm.inputText);

                    // Clear the data
                    vm.inputText = "";
                };
            });
</script>
</body>
</html>

vm.allData它只是没有更新请求从服务器返回。我试图解决这个问题很长一段时间但没有成功。谢谢大家，祝你有个美好的一周， ROTEM

Answer 1

您的代码没有多大意义：

data.list = $q.defer();

因此，data.list是一个延迟对象。但是后来

data.list = $q.resolve(response.data.records);

啊，它不再是延迟的：它被一个已经解决的承诺取代，与getAllData()返回的承诺无关。但是后来

data.list.push(newData);

啊，那段代码认为它是一个数组，而不是一个不是延期的承诺。

这不可能是正确的。如果你想能够推送，它必须是一个数组。如果要在解析http promise时填充数组，请推送到此aray

还不清楚服务应该做什么：它从HTTP服务获取数据，但不会将新值发送到该HTTP服务。因此，每次调用getAllData（）时，都会丢失增加的值。

反正：

            var list = [];
            var getAllData = function() {
                $http.get('http://www.w3schools.com/angular/customers.php')
                        .then(function(response) {
                            // clear the array
                            list.splice(0, list.length);
                            // copy every record to the array
                            response.data.records.forEach(function(record) {
                                list.push(record);
                            });
                        });

                return list;
            };

            var addData = function(newData) {
                list.push(newData);
            };

            return {
                getAllData: getAllData,
                addData: addData
            };

Answer 2

您可以在此处找到working version代码。加载数据时，您将使用新数据替换绑定列表，因此更改不会再被反映。

<强> HTML

<div ng-controller="ViewController as vmView">
    <ul>
        <li ng-repeat="singleItem in vmView.allData">
            {{ singleItem }}
        </li>
    </ul>

    {{ vmView.checkItOut }}

    <input type="button" ng-click="vmView.justClick()" />
</div>

<div ng-controller="AddController as vmAdd">
    <form ng-submit="vmAdd.saveChanges()">
        <input type="text" ng-model="vmAdd.inputText" />
        <input type="submit" />
    </form>
</div>

</body>

<强>的Javascript

 var module = angular.module('MyTest', []);

 module.service('shareDataFactory', function($http, $q) {
   var data = {
     list: []
   };
   $http.get('http://www.w3schools.com/angular/customers.php')
     .then(function(response) {
       Array.prototype.push.apply(data.list, response.data.records);
     });


   return {
     getData: function() {
       return data;
     },
     addData: function(newData) {
       data.list.push(newData);
     }

   };
 });


 module.controller('ViewController', function ViewController($scope, shareDataFactory) {


   $scope.allData = shareDataFactory.getData().list;
   $scope.checkItOut = "Just checking ..";

   $scope.justClick = function() {
     console.log($scope.allData);
   }
 });

 module.controller('AddController', function AddController($scope, shareDataFactory) {


   $scope.inputText = "Hello";

   $scope.saveChanges = function() {
     shareDataFactory.addData($scope.inputText);

     // Clear the data
     $scope.inputText = "";
   };
 });

在控制器之间共享数据 - Angularjs

2 个答案: