Почему контроллер не видит изменение данных в сервисе?

Question

[Роман Родионов]

.controller("RegistrationCtrl", function ($scope,  UserService){
            $scope.regMessage = UserService.regResp;
            $scope.addUser = UserService.add;
        })
.service("UserService", function ($http){
            this.regResp = "Hello";
            this.add = function(){
                var o = this;
                $http.get("api/register").then(function (response){
                    o.regResp = response.data.message; // здесь меняется значение переменной regResp, и должно поменяться значение regMessage в контроллере, но этого не происходит.
                });
            }
        });

<div ng-controller="RegistrationCtrl">
<span>{{regMessage}}</span>
</div>

Answer 1

[napa3um]

Примитивные типы в JS копируются по значению, объекты копируются по ссылке. Чтобы скоуп мог отслеживать изменения, копируйте в него ссылки на объекты, а не примитивные значения.

.controller("RegistrationCtrl", function ($scope,  UserService){
            $scope.regMessage = UserService.regResp; // тут в переменную $scope.regMessage копируется _примитивное_значение_ переменной UserService.regResp, при обновлении UserService.regResp переменная $scope.UserService не изменится; не будем использовать эту переменную
            $scope.UserService = UserService; // тут в переменную $scope.UserService копируется _ссылка_на_объект, на который ссылается переменная UserService, при обновлении объекта по обоим переменным теперь можно увидеть изменения
            $scope.addUser = UserService.add;
        })
.service("UserService", function ($http){
            this.regResp = "Hello";
            this.add = function(){
                var o = this;
                $http.get("api/register").then(function (response){
                    o.regResp = response.data.message;
                });
            }
        });

<div ng-controller="RegistrationCtrl">
<span>{{UserService.regResp}}</span>
<!-- простое правило: если в биндинге есть точка, то биндинг может отслеживать изменения, произведённые и извне контроллера, привязанного к данному скоупу -->
</div>

Подробности:
https://learn.javascript.ru/object-reference
learnwebtutorials.com/why-ng-model-value-should-co...
https://habrahabr.ru/post/182670/

Comments

[Владимир]

И все что в this сервера вываливается в контроллер, прийдется контролировать чтобы в this сервиса небыло лишних переменных

[napa3um]

Владимир: нет, скорее всё, что нужно помещать в скоуп - оборачивать в объект (эти объекты часто называют моделями). Например, this.data = {msg: 'hello'}, если хотим отслеживать изменения msg, а в скоуп копировать ссылку на модель svc.data.