9

The angular code placed on jsfiddle is regarding a custom directive, that uses $compile($element)($scope) and causes the ng-click action to happen twice: My questions are:

  • I would like to understand, why is the ng-click action happening twice?
  • What is the purpose of calling $compile($element)($scope)?
  • what happens if it is not called, under what circumstances should it be called?

Here are the details and what I have gathered so far:

I would like to understand, why is the ng-click action happening twice? The following line shows the custom directive "hello" and ng-click on a button. The custom directive calls $compile($element)($scope) and that is the line that causes the action being fired twice, but I don't understand how?

Test CLICK!

Here is the code - http://jsfiddle.net/4x4L3gtw/27/

<div ng-app='myApp' ng-controller='DirectiveTestController'>
    <button hello ng-click="testClick()">Test CLICK!</button>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('DirectiveTestController', ['$scope',

function ($scope) {
    $scope.testClick = function () {
        window.alert("hey");
        console.log("hey");
    }
}]);
myApp.directive('hello', function () {
    return {
        scope: true,
        controller: ['$scope', '$element', '$compile', function ($scope, $element, $compile) {
            $element.removeAttr('hello');
            //          $element.removeAttr('ng-click');
            $compile($element)($scope);
        }]

    };
});

What is the purpose of calling $compile($element)($scope), what happens if it is not called and under what circumstances should it be called?

(click on the button and you will notice that the action happens twice)

The intent of the directive is to hide/disable based on some logic. so in this directive I see $element.removeAttr("ng-hide"), etc, and each time the $element.removeAttr is called it is followed with a $compile($element)($scope), is the purpose to re-write the DOM?

I examined the DOM and I don't see ng-click defined multiple times. When examining the DOM (firebug), I looked at $element->0->attributes->ng-click (among other elements).

If I remove ng-click using $element.removeAttr("ng-click") then the action only happens once. Or if I remove the $compile($element)($scope) the action only happens once.

Aggieborn
  • 312
  • 2
  • 8
liontale
  • 91
  • 1
  • 6

3 Answers3

3

I think the main reason why this is happening is because you are using a click event in the element where you apply the directive, instead of defining this event directly in the directive. Therefore you are getting the click from the button element, but also the click from the directive controller.

What $compiles do is once invoked against markup will produce a function you can use to bind the markup against a particular scope (what Angular calls a linking function), that's why Rodion suggested using link, I guess. In this particular case, it means that you are are using an event directly in the element button but then linking it again to the scope in your directive by using $compile. I guess that's why you get the message twice.

As I don't know whether this is clear, I obtained the information from this link http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx where it is way better explained.

Here also a JSFiddle where you can see how it works (excerpt from the article above).

app.directive("otcDynamic", function($compile){
   return {
        link: function(scope, element){
            var template = "<button ng-click='doSomething()'>{{label}}</button>";
            var content = $compile(template)(scope);
            element.append(content);
        }
    };
});

JSFiddle

Raman Sahasi
  • 30,180
  • 9
  • 58
  • 71
Gonzalo
  • 76
  • 6
0

I think such operations (with html) should be in link (not in controller):

link: function (scope, element) { element.removeAttr('hello'); }

http://jsfiddle.net/4x4L3gtw/32/

Rodion
  • 521
  • 2
  • 10
  • Rodion thanks, could you please explain why the link method instead of the controller – liontale Jan 17 '15 at 15:14
  • good explanation of differences between controller and link you can find in the other question : http://stackoverflow.com/questions/15676614/directive-link-vs-compile-vs-controller . I don't sure, but to my mind the main reason, why you should do operations with DOM in link is because link invokes after html compiling. – Rodion Jan 17 '15 at 15:46
0

compile - $compileProvider - service in module ng Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

The compilation is a process of walking the DOM tree and matching DOM elements to directives.

Daniel Kaufman
  • 1
  • 3
  • Thanks DK, in my directive want to just do removeAttr in some of the attributes, and the DOM is updated upon calling removeAttr then why do I have to call $compile? – liontale Jan 17 '15 at 15:18