使用服务更新AngularJS中的控制器
[英]Update controllers in AngularJS with Services
问题描述
I ask for excuse for my bad english!! 
我为我的英语不好找借口！
Hello, I've a problem: 您好，我遇到了问题：
var app = angular.module('testino', []); app.controller('listController', listController ); listController.$inject = ['service']; function listController(service) { console.log("listController instanziato"); vm = this; vm.lista = service.getLista(); vm.add = function () { service.addElement(); service.getLista; } vm.load = service.load(); } app.controller('loadingController', loadingController); loadingController.$inject = ['service']; function loadingController (service) { console.log("loadingController instanziato"); var vm = this; vm.load = service.load(); } app.factory('service', service); service.$inject = ['$http']; function service ($http) { console.log("service instanziato"); var sv = this; sv.lista = [ {1:"ciao"},{2:"ciao"},{3:"ciao"}]; sv.load = "LOADING" return { getLista : getLista, addElement : addElement, load : getLoading } function getLista() { return sv.lista; } function addElement() { sv.lista.push( {ciao:4} ); console.log (sv.load); sv.load = "LOADED"; console.log (sv.load); } function getLoading () { return sv.load ; } }
<!doctype html> <html ng-app="testino"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> <script src="example.js"></script> </head> <body> <div ng-controller="loadingController as vm">loading: {{vm.load}} </div> <ul ng-controller="listController as lvm"> <button ng-click='lvm.add()'>Ciccio</button> <li ng-repeat = "e in lvm.lista">{{e}} </li> <li>Caricamento: {{lvm.load}}</li> <input type='text' ng-model='lvm.load' /> </ul> </body> </html>
When I try to push (or pop) elments in array (sv.lista - service), all it work but the varible "vm.load" on listController and on loadingController, it's not updated.. 当我尝试在数组（sv.lista-服务）中推送（或弹出）元素时，除listController和loadingController上的变量“ vm.load”外，其他所有元素都可以工作，但不会更新。
I wanna take data on service and to update the controllers just updating data on services. 我想获取服务数据并更新控制器，而仅更新服务数据。
How can I do? 我能怎么做？
Thaks!! Thaks！
1 个解决方案
解决方案1
1 已采纳 2015-03-11 17:03:15
You need to bind the loading status as an object. 您需要将加载状态绑定为一个对象。 Right now you return the loading status when the controllers start as a string, and then when the status changes, you can't see any update because you lost the reference when you changed the string. 现在，当控制器以字符串形式启动时，您将返回加载状态，然后在状态更改时，您将看不到任何更新，因为在更改字符串时丢失了引用。 With objects, you can keep multiple references to the same object and everyone can see when that object changes. 使用对象，您可以保留对同一对象的多个引用，每个人都可以看到该对象何时更改。
var app = angular.module('testino', []); app.controller('listController', listController ); listController.$inject = ['service']; function listController(service) { console.log("listController instanziato"); vm = this; vm.lista = service.getLista(); vm.add = function () { service.addElement(); vm.load = service.load(); } vm.load = service.load(); } app.controller('loadingController', loadingController); loadingController.$inject = ['service']; function loadingController (service) { console.log("loadingController instanziato"); var vm = this; vm.load = service.load(); } app.factory('service', service); service.$inject = ['$http']; function service ($http) { console.log("service instanziato"); var sv = this; sv.lista = [ {1:"ciao"},{2:"ciao"},{3:"ciao"}]; sv.load = "LOADING"; sv.loadObj = { status: sv.load }; return { getLista : getLista, addElement : addElement, load : getLoading } function getLista() { return sv.lista; } function addElement() { sv.lista.push( {ciao:4} ); console.log (sv.loadObj.status); sv.loadObj.status = "LOADED"; console.log (sv.loadObj.status); } function getLoading () { return sv.loadObj ; } }
<!doctype html> <html ng-app="testino"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> <script src="example.js"></script> </head> <body> <div ng-controller="loadingController as vm">loading: {{vm.load.status}} </div> <ul ng-controller="listController as lvm"> <button ng-click='lvm.add()'>Ciccio</button> <li ng-repeat = "e in lvm.lista">{{e}} </li> <li>Caricamento: {{lvm.load}}</li> <input type='text' ng-model='lvm.load.status' /> </ul> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.