Angular JS directives scope variable relationship

Question

I am trying to understand the Angualr JS directives. But i am confused with the scopes and relation ship between the parent controller and directives. For example:

1) I inserted the "hello-world" directive (it has its own controller, please check below code) into the "myCtrl", i mean as a child.

2) I have one variable in the directive, "directiveVar" and other variable in the controller, "controllerVar", each has different values.

3) My confusion are as follows:

As the myCtrl is the parent of the "hello-world" directive, so by default, "hello-world" directive scope can inherit the variables from the controller
But i can see the child "hello-world" directive variables in the parent too, i mean myCtrl.
How is this possible, i mean child can inherit parent values but how did the parent can inherit child values?
What is the use the controller in the directive (I know the reason, but I am confused, i just want some light on that if i am missing anything).

var myapp = angular.module('myapp', []);
angular.module('myapp').directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World<br /> <br />{{color}} <br /> <br /> {{directiveVar}}',
    controller: function ($scope) {
        $scope.color = '#0080ff';
        $scope.directiveVar = "I am directive varible";
    },    
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        console.dir(scope);
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});

angular.module('myapp').controller('myCtrl', function($scope) {
    $scope.color = '#ffb399';
    $scope.controllerVar = "I am controller varible";
});

<!DOCTYPE html>
<html ng-app="myapp">

<head>
    <title>AngularJS: UI-Router Quick Start</title>
    <!-- Bootstrap CSS -->
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    
</head>

<body ng-controller="myCtrl">
  <input type="text" ng-model="color" placeholder="Enter a color" /> 
  <br />
  <br />
  {{color}}
  <br />
  <br />
  {{directiveVar}}
  <br /> <br /> 
  <hello-world/>

<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="lib/angular-bootstrap-contextmenu/contextMenu.js"></script>

<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>

</body>
</html>

bri · Accepted Answer · 2016-01-15 04:54:48Z

1

That's a ton of questions, but let's see if we can address each one. For further reading this is a great overview post

First, Directives MAY or MAY NOT have their own scope.

They don't automatically get their own scope. You have to add that as a part of the directive declaration. Without re-writing someone else's blog post (or the docs), here are some basic rules:

Scope : False ( Directive uses its parent scope )
Scope : True ( Directive gets it's own scope ... a 'child' scope )
Scope : { } ( Directive gets a new isolated scope )

That's about as basic an overview as you need to get around. One more thing to remember is that a directive gets it's own child scope by default (eg - Scope:true is the default setting).

As I said, that article link at the top is really great. I don't want to write a book on directive scope, but please comment if you have anything to add as I think a basic directive/scope "overview" post would be handy.

There are a bunch of links that I would add here, but I think the scope discussion that is most frequently linked is pretty technical and detailed. Not the world's greatest jumping off point (unless you're into cliff diving).

answered Jan 15, 2016 at 4:54

bri

3,04018 silver badges17 bronze badges

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

2 Comments

user3278897 Over a year ago

thank you, main answer to my question lays in the scope rules. But what is the use of the controller in the directive and can the directive can access rootscope ?

bri Over a year ago

All scopes (including the ones in your directives) inherit from root. So, yes. As to the purpose of .controller property -- feels like the topic of another question no?? That'd be a good one!

Collectives™ on Stack Overflow

Angular JS directives scope variable relationship

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related