Question

我发送了一个指令集合，但是当我在父作用域中更新集合时，该指令不会更新集合：

http://jsfiddle.net/edwardtanguay/kj4oj1aa/9/

<div ng-controller="mainController">
    <div item-menu datasource="customers" add="addCustomer()"></div>
    <button ng-click="addCustomer()">add customer</button> Number added: {{numberAdded}}
    <ul>
        <li ng-repeat="customer in customers">{{customer.lastName}}</li>
    </ul>
</div>

我想在我的指令中需要一个$ watch但是在哪里以及如何实现它？

指令：

.directive('itemMenu',function() {

    var controller = function($scope) {
        var vm = this;
        function init() {
            vm.items = angular.copy($scope.datasource);
        }
        init();
    };

    return {
      restrict: 'A',
        scope: {
            datasource: '=',
            add: '&'
        },
        controller: controller,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: 'itemMenuTemplate',
        link: function(scope, element, attrs) {
        scope.getTemplateUrl = function(item) {
            switch(item.kind) {
                case 'external':
                    return 'itemMenuTemplateExternal';
                case 'internal':
                    return 'itemMenuTemplateInternal';
                default:
                    return 'itemMenuTemplateUndefined';
            }
        };
    },
    };

Answer 1

因为您使用的是angular.copy，所以在更新$scope.datasource时它不会更新。

您需要在结尾处使用参数true放置$ watch，以便深入观看。我认为这是你的场景（这在性能方面被认为是相当昂贵的，所以请阅读$watch以确定你是否应该使用其他方法，如$ watchCollection）。

var controller = function($scope) {
    var vm = this;

    $scope.$watch('datasource', function(newVal) {
        copy(newVal);
    }, true);

    function copy(object) {
        vm.items = angular.copy(object);
    }

    function init() {
        //add other init code here
        copy(vm.datasource);
    }

    init();
};

如何更新发送给它的集合时更新指令？

1 个答案: