javascript - 添加自定义复选框指令（具有隔离范围）后，角度内置指令不起作用

Question

我正在尝试在 Angular 中创建一个自定义复选框指令，并且我已经成功地做到了。ng-click但问题是没有调用内置函数。如果自定义指令被删除，ng-click效果很好。我想这与 Scope 有关，我仍然缺乏了解的知识。任何人都可以帮助我吗？

代码在这里http://jsfiddle.net/bingjie2680/UzM2c/2/。

<div ng-app="components">
    <div ng-controller="MainCtrl">
        <input type="checkbox" ng-model="p.checked" />
         <div checkbox="p.checked" ng-click="test()">test</div>
         {{p.checked}}
    </div>
</div> 

js：

function MainCtrl($scope){ 
    $scope.p = {checked: false,  name:'test'};
    $scope.$watch('p', function(){

    }, true);

    $scope.test = function(){
        alert('test');
    }
}

angular.module('components', []).
directive('checkbox', function () {
return {
    link : function (scope, ele, attr){
        ele.bind('click', function(){
            ele.toggleClass('active');
            scope.$apply(function(){
                scope.value = ele.hasClass('active');
            });
        });

        scope.$watch('value', function(newv, oldv){
            newv ? ele.addClass('active') : ele.removeClass('active');
        });
    },
    scope : {
        value: '=checkbox'
    }
}
});            

Answer 1

尽管@Yahya 的答案会起作用，而不是 using $parent，如果您的 HTML 结构发生更改（即 HTML 更改可以更改范围的继承方式），它可能会中断，但您应该在 HTML 属性中指定您希望指令调用的方法/回调单击元素时：

<div checkbox="p.checked" cb="test()">test</div>

然后在你的指令中：

ele.bind('click', function(){
   ele.toggleClass('active');
   scope.cb();               // calls test()
   scope.$apply(function(){
     scope.value = ele.hasClass('active');
   });
});
...        
scope : {
   value: '=checkbox',
   cb: '&',
}

小提琴

Answer 2

那是因为您有一个具有隔离范围的指令，请尝试以下操作：

<div checkbox="p.checked" ng-click="$parent.test()">test</div>

那可行。
希望这有帮助。