Question

我在理解双向数据绑定如何在指令内工作时遇到问题。似乎它只有一种方式工作，因为当我通过直接在输入字段模型中键入来更新值时，即使数据源设置为'='，也不会更新。当我点击更改项目按钮模型也更新。为什么在输入字段内键入不会更新模型？

此外，如果工厂/服务是单身，为什么我能够通过单击按钮创建新的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>

指令内的Angular双向数据绑定

0 个答案: