我为我的英语不好请原谅!!
你好，我有一个问题:
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”没有更新。
我想获取服务数据并更新 Controller ，只需更新服务数据。
我该怎么办？
谢谢!!
最佳答案
您需要将加载状态绑定(bind)为对象。现在，当 Controller 作为字符串启动时，您返回加载状态，然后当状态更改时，您看不到任何更新，因为更改字符串时丢失了引用。使用对象，您可以保留对同一对象的多个引用，并且每个人都可以看到该对象何时发生更改。
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>关于javascript - 使用服务更新 AngularJS 中的 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28992660/