角度內置指令不工作後自定義複選框指令（與隔離範圍）添加

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

那是因爲你有一個隔離的範圍指令試試這個：

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

，將工作。
希望這有助於。

Answer 2

雖然@葉海亞的答案會工作，而不是使用$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: '&', 
} 

Fiddle