AngularJS: Как правильно установить свойство службы из данных модели в контроллере?

Question

Я установил службу для обмена некоторыми данными/состоянием между несколькими контроллерами. В одном контроллере я обновляю некоторые свойства службы с данными области с помощью функции сохранения. Эти данные затем используются в других контроллерах, назначая значение области для службы. Проблема заключается в том, что в зависимости от типа данных, которые первый контроллер назначает службе, их поведение отличается. Если данные модели являются примитивными значениями, тогда свойство службы будет ТОЛЬКО обновляться при запуске функции сохранения. Однако, если данные модели являются объектом, он будет продолжать обновлять службу по мере изменения данных модели. Я ищу для реализации «сохранить» функциональность, так что это не то, что я ищу.

Итак, я пытаюсь понять различное поведение: примитивный против объекта и почему объект немедленно обновляется, а также, что было бы правильным способом реализовать функцию сохранения с объектом. Я знаю, что вы можете использовать события, и я мог бы $ broadcast и event на $ rootScope и использовать это событие на втором контроллере, чтобы присвоить свойство службы переменной var, но мне нравится простота присвоения услуги области в второго контроллера и хотел бы использовать этот метод, если это возможно.

Вот упрощенный пример.

var myApp = angular.module('myApp', []); 

myApp.service('myService', function() { 
    this.text = ''; 
    this.objText = {}; 

    this.setText = function (text) { 
     this.text = text; 
    }; 

    this.setObjText = function (obj) { 
     this.objText = obj; 
    }; 
}); 

myApp.controller('InputCtrl', ['$scope', 'myService', function ($scope, myService) { 
    $scope.textObj = {}; 
    $scope.saveText = function (text) { 
     myService.setText(text); 
    } 
    $scope.saveObj = function (obj) { 
     myService.setObjText(obj); 
    } 
}]); 

myApp.controller('OutputCtrl', ['$scope', 'myService', function ($scope, myService) { 
    $scope.myService = myService; 
}]); 

И в представлении (частичное):

<div ng-controller="OutputCtrl"> 
    <strong>Text:</strong> {{ myService.text }}<br> 
    <strong>Obj Text:</strong> {{ myService.objText } 
</div> 

Полная скрипку здесь: http://jsfiddle.net/anpsince83/uRH93/2/

Answer 1

Это не имеет ничего общего с Угловое. Это простой, старый JavaScript-связанный.

В HTML вашой скрипки в вас есть (номер для справки ниже):

(1)<input type="text" ng-model="text1"> 
(2)<button ng-click="saveText(text1)">Save Text</button> 
    ... 
(3)<input type="text" ng-model="textObj.text1"> 
(4)<input type="text" ng-model="textObj.text2"> 
(5)<button ng-click="saveObj(textObj)">Save Object Text</button> 

---

'строка' случай (примитив):

линии (1) создает строку переменная, называемая text1, в области InputCtrl (далее inScope) и привязывает ее к значению поля ввода. Всякий раз, когда изменяется значение поля ввода, равно значение inScope.text1.
При нажатии кнопки (строка (2)) переменная myService text установлена ​​в значение из inScope.text1. Поскольку «строка» является примитивной, она передается по значению, что означает, что myService.text и inScope.text1: не, ссылающиеся на один и тот же объект - они просто «бывают», чтобы иметь такое же значение после вызова метода saveText(). После изменения inScope.text1 (например, пользователь вводит что-то в поле ввода), myService.text ничего не знает об этом. Этот случай он эквивалентен:

var a = 'value1'; 
var b = a; 
// Now: a === 'value1', b === 'value1' 

a = 'value2'; 
// Now: a === 'value2', b === 'value1' 

---

'объекта' случай (объект):

линии (3) и (4) создают два свойства (text1, text2) в (первоначально пустой) объект, на который ссылается переменная inScope textObj. Всякий раз, когда изменяется значение каждого поля ввода, равно значение соответствующего свойства объекта, на которое ссылается inScope.textObj.
Когда нажата кнопка (строка (5)), переменная myService object установлена ​​в с ссылкой на том же объекте, что и inScope.textObj. Вы заметили, что я использую термин ссылка вместо значение. Поскольку «объект» не является примитивным, он передается по ссылке, что означает, что myService.object и inScope.textObj ссылаются на тот же объект (после вызова метода saveObj()). Изменение значений полей ввода, определенных в строках (2) и (3) влияет на свойства объекта, на который ссылается inScope.textObj (который также ссылается myService.object) в этом случае он эквивалентен:.

var a = { key: 'value1' }; // Creates new object, say {obj1} 
var b = a;     // Now b references {obj1} as well 
// Now: a.key === 'value1', b.key === 'value1' 

a.key = 'value2'; // Changes {obj1}'s key's value 
        // but {obj1} is also referenced by b, so... 
// Now: a.key === 'value2', b.key === 'value2' 

// This does not happen in your code, so you never lose reference to 
// the same object from both `myService.object` and `inScope.textObj` 
a = { key: 'value3' }; // Creates new object, say {obj2} 
         // but b still references {obj1}, not {obj2}, so... 
// Now: a.key === 'value3', b.key = 'value2' 

---

More info на JS примитивов против объективистские ts