使用服务更新 AngularJS 中的控制器

Update controllers in AngularJS with Services

本文关键字：控制器 AngularJS 更新 服务      更新时间：2023-09-26

我为我的英语不好找借口！！

您好，我有一个问题：

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 - service）中推送（或弹出）elments时，除了listController和loadController上的可变"vm.load"之外，它的所有工作都没有更新。

我想获取服务数据并更新控制器，只是更新服务数据。

我该怎么办？

咔嚓！！

您需要将加载状态绑定为对象。现在，当控制器以字符串形式启动时，您将返回加载状态，然后当状态更改时，您看不到任何更新，因为在更改字符串时丢失了引用。使用对象，您可以保留对同一对象的多个引用，并且每个人都可以看到该对象何时更改。

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>

相关文章：