Почему значение моей службы angular не обновляет мою область?

#angularjs

#angularjs

Вопрос:

У меня есть этот простой jsfiddle, который демонстрирует то, что, как я думал, будет динамическим значением сервиса, которое может контролироваться любым контроллером, в который оно было введено. Вот код angular:

 var app = angular.module("application", []);

app.service("valueSetter", function(){
    that = this;
    this.serviceValue = {count: 1};
    this.updatevalue = function(){
        that.serviceValue.count = that.serviceValue.count   1;
        console.log(that.serviceValue);
    };
});

app.controller("appcontroller", function($scope, valueSetter){
    $scope.scopeValue = valueSetter.serviceValue.count; 
    $scope.update = function(){
        valueSetter.updatevalue();
    };
});
  

и html прост:

 <div ng-app="application" ng-controller="appcontroller">    
    Scope value is: {{scopeValue}}<br /><br />
    <input type="button" value="update" ng-click="update()" />
</div>
  

Если вы смотрите консоль, вы можете увидеть увеличение значения службы, но увеличенное значение не отражается в области контроллера. Я неправильно понимаю, как это должно работать?

Ответ №1:

Вы не можете привязаться к такой служебной переменной, но вы можете привязаться к сервисной функции. Добавьте средство получения в свой сервис:

 this.getValue = function(){
    return that.serviceValue;
}
  

Назначить scopeValue в контроллере получателю:

 $scope.scopeValue = valueSetter.getValue; 
  

Привязать так:

 Scope value is: {{scopeValue()}}
  

Редактировать

Вы также можете назначить свою valueSetter службу $scope переменной в контроллере:

 $scope.valueSetter = valueSetter;
  

И привязать так:

 Service value is: {{valueSetter.serviceValue}}
  

ДЕМОНСТРАЦИЯ

Редактировать 2

Вы также можете изменить this.serviceValue службу, чтобы она была объектом, вот так:

 this.serviceValue = {value: 1};
this.updatevalue = function(){
    that.serviceValue.value = that.serviceValue.value   1;
    console.log(that.serviceValue.value);
};
  

В вашем контроллере назначьте scopeValue так:

 $scope.scopeValue = valueSetter.serviceValue; 
  

А затем привязать следующим образом:

 Scope value is: {{scopeValue.value}}
  

ДЕМОНСТРАЦИЯ

Дело в том, что если свойство в службе является примитивом (по сути, строкой, числом или логическим значением), когда вы присваиваете его переменной области видимости, вы просто создаете копию значения, и оно не имеет обратной ссылки на службу. Если свойство service является объектом, то при назначении его переменной области видимости вы копируете ссылку на свойство service, что дает вам привязку, которую вы ищете.