使用服务更新AngularJS中的控制器
[英]Update controllers in AngularJS with Services
问题描述
我为我的英语不好找借口！
您好，我遇到了问题：
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>
当我尝试在数组（sv.lista-服务）中推送（或弹出）元素时，除listController和loadingController上的变量“ vm.load”外，其他所有元素都可以工作，但不会更新。
我想获取服务数据并更新控制器，而仅更新服务数据。
我能怎么做？
Thaks！
1 个解决方案
解决方案1
1 已采纳 2015-03-11 17:03:15
您需要将加载状态绑定为一个对象。 现在，当控制器以字符串形式启动时，您将返回加载状态，然后在状态更改时，您将看不到任何更新，因为在更改字符串时丢失了引用。 使用对象，您可以保留对同一对象的多个引用，每个人都可以看到该对象何时更改。
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>
AngularJS - 创建控制器和服务的不同方法，为什么？
[英]AngularJS - different ways to create controllers and services, why?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.