Directive is called every time page loads, why?

Question

I'm working in some directives in AngularJS and this is the code:

app.directive('country', ['$http', function($http) {
        return {
            restrict: "C",
            link: function(scope, element, attrs) {
                $http.get(Routing.generate('countries')).success(function(data) {
                    if (data.message) {
                        scope.message = data.message;
                    } else {
                        scope.countries = data.entities;
                    }
                }).error(function(data, status, headers, config) {
                    if (status == '500') {
                        scope.message = "No hay conexión con el servidor.";
                    }
                });
            }
        };
    }]);

app.directive('state', ['$http', '$parse', function($http, $parse) {
    return {
        restrict: "C",
        scope: {
          country: "="  
        },
        link: function(scope, element, attrs) {
            scope.$watch(attrs.trigger, function() {
                console.log("I'm in");
                if ($parse(attrs.trigger) !== undefined) {
                    states = $parse(attrs.statetrigger)(scope);
                    states = {};

                    $http.get(Routing.generate('states') + '/' + $parse('scope.' + attrs.trigger).iso_country).success(function(data) {
                        if (data.message) {
                            scope.message = data.message;
                        } else {
                            scope.states = data.entities;
                        }
                    }).error(function(data, status, headers, config) {
                        if (status == '500') {
                            scope.message = "No hay conexión con el servidor.";
                        }
                    });
                }
            });
        }
    };
}]);

app.directive('city', ['$http', '$parse', function($http, $parse) {
        return {
            restrict: "C",
            link: function(scope, element, attrs) {
                scope.$watch(attrs.statetrigger, function() {
                    if ($parse('scope.' + attrs.countrytrigger) !== undefined && $parse('scope.' + attrs.statetrigger) !== undefined) {
                        $http.get(Routing.generate('cities') + '/' + $parse('scope.' + attrs.countrytrigger).iso_country + '/' + $parse('scope.' + attrs.statetrigger).state).success(function(data) {
                            if (data.message) {
                                scope.message = data.message;
                            } else {
                                scope.cities = data.entities;
                            }
                        }).error(function(data, status, headers, config) {
                            if (status == '500') {
                                scope.message = "No hay conexión con el servidor.";
                            }
                        });
                    }
                });
            }
        };
    }]);

For some reason, unknow for me, any time page loads both directives are called and don't know why, can any give me some tips? I leave since one image talk more than thousands of words.

Answer 1

see you go to understand the execution of angular js! When you start the web application the angular js loads up all the references to directives and controllers etc in the memory thats when the first call happens but your directives etc arent executed.

now in the html you must have used controllers and directives so thats where the angular js compiler replaces the custom directives like ng-repeat,ng-show etc which are unknown to HTML world with the plain HTML code and cooks up javascript code which are called as $watches so that your model is automatically binded to the view.. i.e. the 2 way data binding, at a very basic is nothing but a javascript code which would run when you update a model the difference is that you dont have to code it explicitly angular will do that for you.

so any directives which are in HTML will be called when the page loads so that angular can know what to do with it