Question

我有一个自定义指令的项目列表，每个项目都有一个删除按钮。现在我想在我的列表中只剩下一个项目时禁用此删除按钮，但由于某种原因它无法按预期工作。

我已经制作了一个plunker示例，您可以在其中观察此行为。

我猜我指令的canRemove: '&'部分有问题。但我不知道如何让它发挥作用。

查看：

<body ng-controller="MainCtrl as vm">
    <div ng-repeat="item in vm.items">
        <my-directive item="item"
                      canRemove="vm.items.length != 1"
                      remove="vm.remove(item)">
        </my-directive>
    </div>
</body>

控制器：

app.controller('MainCtrl', function($scope) {
    var vm = this;

    vm.items = [
        {
            number: 1
        } , {
            number: 2
        }
    ];

    vm.remove = function(item) {
        vm.items.splice(vm.items.indexOf(item), 1);
    }
});

指令：

app.directive('myDirective', function() {
    return {
        restrict: 'EA',
        scope: {
            item: '=',
            canRemove: '&',
            remove: '&'
        },
        controller: function() {
            var vm = this;

            vm.onRemove = function() {
                vm.remove({ item: vm.item });
            };
        },
        controllerAs: 'vm',
        bindToController: true,
        template: '<button ng-disabled="!vm.canRemove" ng-click="vm.onRemove()">' + 
                  '    Remove {{ vm.item.number }}' +
                  '</button>'
    }
});

PS：由于我对棱角分明的新手是我处理删除物品的好方法吗？或者我应该使用broadcast和on代替吗？

Answer 1

首先，属性应该看起来像can-remove：

<my-directive item="item" can-remove="vm.items.length > 1" remove="vm.remove(item)"></my-directive>

然后在范围配置中，您需要使用=绑定而不是&：

scope: {
    item: '=',
    canRemove: '=',
    remove: '&'
},

演示： http://plnkr.co/edit/DlZafON6HEdoyhzvwNIh?p=preview

使用父控制器中的表达式禁用angularjs指令中的项

1 个答案: