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

Question

我的英语不好请见谅！！

你好，我有一个问题：

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" 没有更新..

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

我该怎么办？

萨克斯！！

Answer 1

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

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 中的控制器

Update controllers in AngularJS with Services

javascript

service

controllers

angularjs