Execution flow of a directive in angular js and using its attributes

Question

hello i would like to know the steps of execution of directives and some fundamental details about how the processing happens this would be very helpful for more customization of directives and exploit its features...

i have a sample template with a directive and the attributes needed and few html tags as shown

template1:-

<directive1 s-web-service-path="object.WebServicePath" >

<h1>any html content</h1>

</directive1>

my directive is i.e. it calls a web service to get its content

widgetsModule.directive("directive1", function ($http) {
try {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        scope: {


            sWebServicePath: "="
        },

        template: '<div ng-transclude><h1>My content {{result }}</h1> </div> ',

        link: function (scope, element, attrs) {

            var request = '<request struct>';

            $http({ method: "POST", url: scope.sWebServicePath, data: request }).
            success(function (data, status) {
                scope.result = data;
            }).
            error(function (data, status) {
                alert("Service Call Error");
            })
        }
    }
}
catch (e) {
    alert(e);
}
});

What is the difference between attrs and $scope in the link function... in above case

 $scope.sWebServicePath gives me the value of object.WebServicePath i.e. something like     "http://anypath.asmx"

but

attrs.sWebServicePath  give me object.WebServicePath...  why is this difference and how is it useful?

I know that putting "ng-transclude" would enable me to have

<h1>any html content</h1>

in the specified div of my template with in the directive but how does the execution happens?

and why is that return is to be written in a directive it returns a link function alright and it can be used for DOM manipulation but any example of when do i use it? i know these might sound very fundamental but please do throw some light on the execution flow of the directive...or some good source of reference...thank you! and advice/tips on the usage of the parameters of the directive would be very helpful

stephenkelzer · Accepted Answer · 2016-07-25 15:51:32Z

1

this link has the best documentation on usage of directives they should have put this link under directive definition ... js came across this page while reading the angular documentation

http://docs.angularjs.org/api/ng.$compile

edited Jul 25, 2016 at 15:51

stephenkelzer

1,2842 gold badges12 silver badges21 bronze badges

answered Dec 3, 2013 at 5:41

Rishul Matta

3,5035 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

daremachine Over a year ago

yea, this page of documentation is very usefull

daremachine · Accepted Answer · 2013-12-05 02:14:00Z

0

if you use http request in directive you dont forget for $watch because http calls are asynchronous.

Diference between attr and scope is:

scope - is own scope of directive

attr - are attribs of directive

i think so data passed through attr not have to always same as your own scope, because you can make your new own scope for directive but cant change attr.

may be helpful for you

about-those-directives
egghead.io
onehungrymind.com/angularjs-directives-basics/
2013 - angularjs-directives-using-isolated-scope-with-attributes

many sources

AngularJS-Learning

edited Dec 5, 2013 at 2:14

answered Nov 26, 2013 at 12:38

daremachine

2,7982 gold badges27 silver badges36 bronze badges

Collectives™ on Stack Overflow

Execution flow of a directive in angular js and using its attributes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related