gpt4 book ai didi

javascript - 使用服务更新 AngularJS 中的 Controller

转载 作者:行者123 更新时间:2023-12-03 10:35:51 25 4
gpt4 key购买 nike

我为我的英语不好请原谅!!

你好,我有一个问题:

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com