CODEWITHSUNDEEP
angularjsangularjs-directive
Rahul Shivsharan
Rahul Shivsharan

Reputation: 2561

Is my directive using a defining or isolate or child scope?

I am learning directive module of Angular.js and how to create your own diectives.

I am reading a book "Mastering AngularJS Directives by Josh Kurz".

Here I went though one example, but didn't understood much.

This is the code below,

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
    <title>Recipe 02 example 01</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\js\bootstrap.js"></script>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap-theme.css"></link>
    <script type="text/javaScript">
        angular.module("MyApp",[]);

        (function(){
            angular.module("MyApp").controller("myCtrl",myCtrl);
            angular.module("MyApp").directive("bbString",bbString);
            angular.module("MyApp").directive("bbTwoString",bbTwoString);
            angular.module("MyApp").directive("bbExpression",bbExpression);

            function myCtrl($scope){
                $scope.actorName = "Jim Carry";
            };

            function bbString(){
                var obj = {
                    scope : {
                        name : "@abbraKaDabraa"
                    },
                    template : "<input ng-model='name' />"  
                }

                return obj;
            };

            function bbTwoString(){
                var obj = {
                    scope : {
                        name : "=theName"
                    },
                    template : "<input ng-model='name' />"  
                }
                return obj;
            };

            function bbExpression(){
                var obj = {
                    scope : { term : "&" },
                    template : "<input ng-model='term' />",
                    link : function(scope,element,attrs){                           
                        scope.term = scope.term();
                    }
                }

                return obj; 
            }
        })();
    </script>
</head>
<body ng-controller="myCtrl">
    <div class="container">
        <div class="well">
            <div bb-string abbra-ka-dabraa="{{actorName}}"></div>
            <p><b>{{actorName}}</b></p>
            <div bb-expression term="newTerm = actorName + ' Some Extra content'"></div>    
            <br/>
            <div bb-two-string the-name="actorName"></div>
        </div>
    </div>      
</body>

From the above example you can see,

I have created three directives "bb-string", "bb-two-string" and "bb-expression".

After reading the book, what I understood is all the directives are having defining scope.

What I understood from the the term defining scope is that "The scope which a directive gets from its parent directive".

So whether I understood properly, or is it that the directive "bb-string" has an isolate scope, and the directive "bb-two-string" has a defining scope. ?

If all the directives are using "defining scope" so are these scope inherited from controller "myCtrl" scope ?

And last questing,

the directive "bb-expression" has a code,

scope.term = scope.term();

what does "scope.term()" mean, were does the term function came from ?

this is the link for the live example.

First directive example

Upvotes: 0

Views: 39

Answers (1)

cubbuk
cubbuk

Reputation: 7920

All of your directives in your example use isolated scope as you defined a scope object in directive definitions. If you haven't used scope parameter, then directive's scope will be a child scope of where ever they called from. Difference between each three case is how you use the arguments passed to your directives.

In the first directive you passed an attribute using @, so you only pass a value to your directive from outside. If you change the value of the passed argument it does not affect the value of the given parameter outside your directive. So you can think of it as one-way binding.

Your second directive uses two-way binding by using = sign. So when you change the passed argument in your directive, changes are reflected back to the outer scope which passed this value into your directive.

Your third directive passed the argument as an expression by using &. With this approach you can pass functions to your directive and call these functions in your directive. So in your example, you assign the return value of the passed in function to your scope by the given statement $scope.term = $scope.term();

Upvotes: 1

Related Questions