Question

我试图不断更新控制器中的值。可以使其与初始属性值一起使用，但以后不会更新。我已经尝试了很多方法来执行此操作，并经历了很多线程，但是我无法使其工作……由于几乎不知道问题出在哪里，我已经几乎放弃了。

在这种情况下，我试图尽量避免使用广播。您能发现我明显做错了什么吗？

angular.module('app',[])

.controller('mainCtrl', function(userService) {
  var vm = this;
  
  vm.livePropertyFromService = userService.getValue('property');

  vm.incrementServiceProperty = function() {
    userService.update('property', userService.user.property + 1);
    console.log('userService.user.property = ', userService.user.property);
  }
  
})

.service('userService', function($window) {
  var service = this;
  service.user = {
    property: 0
  };
  
  service.update = function(propertyName, property) {
    service.user[propertyName] = property;
  };
  
  return {
    update: function(propertyName, property) {
      service.user[propertyName] = property;
    },
    getValue: function(key) {
      return service.user[key];
    },
    user: service.user
  }
});

<html ng-app="app">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
      <button ng-click="vm.incrementServiceProperty()">Increment property</button>
      <span ng-bind="vm.livePropertyFromService"></span>
    </div>
  </body>
 </html>

Answer 1

vm.incrementServiceProperty = function() {
    userService.update('property', userService.user.property + 1);
    vm.livePropertyFromService = userService.getValue('property');

    console.log('userService.user.property = ', userService.user.property);
}

和

<span>{{vm.livePropertyFromService}}</span>

应该做到！

此外，广播并不是一个坏主意，为什么反对它呢？传递了此服务的每个控制器都可以订阅更改并使用该值执行某些操作。

Answer 2

实际上，我在发布此消息后的一会儿就自己解决了这个问题，我一直在努力使它在昨天的整个晚上都能正常工作。

我已将vm.livePropertyFromService替换为对象而不是服务对象的属性。从vm.livePropertyFromService到vm.user，为其分配userService.user，然后在HTML中引用vm.user.property！它像魔术一样神奇地工作。

angular.module('app',[])

.controller('mainCtrl', function(userService) {
  var vm = this;
  
  vm.user = userService.user;

  vm.incrementServiceProperty = function() {
    userService.update('property', userService.user.property + 1);
    console.log('userService.user.property = ', userService.user.property);
  }
  
})

.service('userService', function($window) {
  var service = this;
  service.user = {
    property: 0
  };
  
  service.update = function(propertyName, property) {
    service.user[propertyName] = property;
  };
  
  return {
    update: function(propertyName, property) {
      service.user[propertyName] = property;
    },
    getValue: function(key) {
      return service.user[key];
    },
    user: service.user
  }
});

<html ng-app="app">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
      <button ng-click="vm.incrementServiceProperty()">Increment property</button>
      <span ng-bind="vm.user.property"></span>
    </div>
  </body>
 </html>

将服务属性绑定到控制器AngularJS

2 个答案: