Custom directive interfering with ngClick

Question

In this script , why does ngClick work in the top link, but ngClick in the link to which I added the user directive does not work completely?

<a class="regular" ng-click="clickTheLink()">A regular ng-click link</a> <a class="disableable" disable="disableTheLink" ng-click="clickTheLink()">A disableable link!</a> 

As far as I can tell, nothing that I do in the directive should interfere with the behavior of ngClick in general, since all it does is manipulate CSS classes:

 app.directive('disableable', function(){ return { restrict: 'C', scope: { disable: '&' }, link: function (scope, elem, attrs) { scope.$watch(scope.disable, function (val) { if (val){ elem.addClass('disabled'); elem.removeClass('enabled'); } else { elem.addClass('enabled'); elem.removeClass('disabled'); } }); } }; }); 

Answer 1

The fact is that each DOM element has only one area. Therefore, if any directive uses an isolated scope, like you are here, this becomes the only scope of the element. This area is completely disconnected from any parent areas, and in your example clickTheLink is not there.

The simple answer is not to use the selection area. This is a good syntax, but you can do everything that it does manually. For '&' params, you can simply use the parsing service to parse attribute expressions.

See the updated working script: http://jsfiddle.net/SNQQV/3/

Answer 2

This is because you create an isolation area in line 14 of the script, the clickTheLink function exists only in the controller, and not in the directive. Although I highly recommend not doing this this way, you can quickly access the parent area via $ parent

  <a class="disableable" target="_blank" disable="disableTheLink" ng-click="$parent.clickTheLink()">A disableable link!</a> 

Entering this code allows the script to work correctly. Here is the script: http://jsfiddle.net/bpN9b/10/

My suggestion is to see how ngClass as well as ngDisabled works. I think that both of them will allow you not to use this directive at all.