Угловая двусторонняя привязка данных внутри директивы
У меня проблема с пониманием того, как двусторонняя привязка данных работает внутри директивы. Кажется, это работает только в одном случае, потому что когда я обновляю значение, печатая непосредственно в модели поля ввода, он не обновляется, даже если для источника данных задано '='. Когда я нажимаю кнопку изменения элемента, модель также обновляется. Почему ввод внутри полей ввода не обновляет модель?
Кроме того, если фабрики / сервисы являются синглетонами, почему я могу создавать новые экземпляры Item, нажимая кнопку, и каждый из них содержит отдельное значение?
Я не был уверен, связаны ли эти две проблемы друг с другом или нет, поэтому спрашиваю об этом так. PLUNKR
angular.module('singletonServicesTest', [])
.controller('pageCtrl', function(Item) {
vm = this;
vm.items = [];
vm.addItem = function() {
console.log('changeItem');
var item = new Item();
vm.items.push(item);
};
vm.addItemWithContent = function() {
var item = new Item('some content');
vm.items.push(item);
};
vm.changeItem = function() {
console.log('change');
vm.items[0].content = Math.random();
};
})
.factory('Item', function() {
function Item(data) {
if (data) {
this.content = data;
}
}
Item.prototype.content = '';
return Item;
})
.directive('itemDirective', function() {
return {
scope: {
datasource: '='
},
template: '<div><input value="{{datasource.content}}" /></div>'
}
});
<body ng-app="singletonServicesTest" ng-controller="pageCtrl as page">
<h1>Hello Plunker!</h1>
<button ng-click="page.addItem()">Add item</button>
<button ng-click="page.addItemWithContent()">Add item with content</button>
<button ng-click="page.changeItem()">change item</button>
<div ng-repeat="item in page.items">
<item-directive datasource="item"></item-directive>
</div>
{{page.items}}
</body>