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

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

javascript angularjs

Javascript 使用父控制器中的表达式禁用angularjs指令中的项,javascript,angularjs,Javascript,Angularjs,我有一个自定义指令的项目列表，每个项目都有一个删除按钮。现在，当列表中只剩下一项时，我想禁用这个删除按钮，但由于某些原因，它不能按预期工作我举了一个例子，你可以观察这种行为我猜我的指令的canRemove:'&'部分有问题。但我不知道如何让它工作查看： <body ng-controller="MainCtrl as vm"> <div ng-repeat="item in vm.items"> <my-directive item="

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

我举了一个例子，你可以观察这种行为

我猜我的指令的

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>'
    }
});

指令：

<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>'
    }
});

app.directive（'myDirective'，function（）{
返回{
限制：“EA”，
范围：{
项目：'='，
canRemove:“&”，
删除：“&”
},
控制器：函数（）{
var vm=这个；
vm.onRemove=函数（）{
remove（{item:vm.item}）；
};
},
controllerAs:'vm'，
bindToController：对，
模板：“”
'删除{{vm.item.number}}'+
''
}
});

PS:因为我对angular很陌生，所以我处理移除物品的方式是一种很好的做法吗？或者我应该改用

广播

和

打开

吗？

首先，属性应该看起来像

可以删除

：

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

演示：