угловая встроенная директива не работает после того, как пользовательская директива checkbox (с областью выделения) добавлена ​​

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> 

ЯШ:

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

Хотя ответ @ Yahya будет работать, вместо использования $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