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

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

<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它只是没有更新affter请求来从服务器返回。我试图解决这个很长一段时间，但没有成功。感谢你们每一个人，并有一个可爱的一周， ROTEM

来源

2015-12-22 R.Bar

@Igor：它是** **共享。 AngularJS服务是单身人士。所以相同的服务被注入到两个控制器中。 –

@JBNizet - 谢谢你，我删除了我的评论。 – Igor

您的代码并没有太大的意义：

data.list = $q.defer();

那么，是Data.List模块延期对象。但后来

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

啊，这不是一个推迟了：它是由一个解决的承诺更换，无关由getAllData()返回的承诺。但后来

data.list.push(newData);

啊，该代码认为这是一个数组，而不是一个承诺不推迟。

这不可能是正确的。如果你想能够推动，它必须是一个数组。如果您希望在解决http承诺时填充阵列，则推送至此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 
      };

来源

2015-12-22 18:19:40

非常感谢你的工作！我知道它现在不在服务器上保存，它只是关于在两个控制器之间进行通信的检查 –

在这里你可以找到你的代码的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 = ""; 
    }; 
});

来源

2015-12-22 19:21:12

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

回答

相关问题