AngularJS: привязка данных и точка-обозначение

Question

Я думаю, что я просто потерял несколько часов до точки в AngularJS.

This Plunker демонстрирует проблему, которая до сих пор раздражает меня:

app.controller('MainCtrl', function($scope, ValueService) { 
$scope.obj= ValueService.getObject(); // Output: {"string": "New!!!"} 
$scope.val = ValueService.getVal(); // Output: "init" 
ValueService.setVal(); 

}) 
.service('ValueService', function(){ 
var output= {string: 'init'}; 

this.setVal = function(val){ 
output.string = 'New!!!'; 
}; 

this.getObject = function(){ 
return output; 
}; 

this.getVal = function(){ 
return output.string; 
}; 

return this; 
}); 

Я знаю, что я должен использовать объекты при использовании ng-model (дот-нотация помогает решению проблем эталонных при поиске вложенных областей). Однако я не знал, что это относится и к простейшему случаю, подобному этому. Я был еще более удивлен, потому что ссылка на мой объект остается в такте, если я использовать массивы (и изменить его с нажатием/сращивания): another Plunker

Может кто-нибудь объяснить, почему именно привязка данных не работает для value больше, когда я переназначить Это? Есть ли способ привязки к значению без передачи объекта-обертки из службы?

Answer 1

Функция getVal возвращает значение output.string AT THAT POINT IN TIME. вы присваиваете это значение своей переменной $ scope.val. поэтому в этот момент времени output.string является «Init», следовательно, значение $ scope.val является «Init» Это никогда не изменится, почему бы вам? Это не имеет никакого отношения к двунаправленной привязке данных или точечной привязке angularjs. Вы просто назначаете значение «Init» в значение $ scope.val и никогда не меняете его снова, это чистая javascript-вещь, которая происходит здесь.

Answer 2

Это потому, что всякий раз, когда вы возвращаете объект из функции в Javascript, вы фактически возвращаете ссылку на объект. В вашем примере

this.getObject = function(){ 
    return output; 
}; 

Возврат ссылки на object. И любые изменения, внесенные в эту ссылку, будут отражены в фактическом объекте, и поэтому для этого работает привязка данных.

Принимая во внимание, что при возврате строки из функции вы возвращаете значение, а не ссылку на фактическую строку.

this.getVal = function(){ 
    return output.string; 
}; 

Здесь вы возвращаете строку при возврате output.string, который имеет значение "init". Любая модификация, сделанная для object.string, больше не будет изменять возвращаемую строку, и поэтому она не подходит для привязки данных для value.

Для получения дополнительной информации см. this answer.