Scope creation and batarang

Consider the following:

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>Exploring directives</title>
</head>
<body> 

  <my-directive>
    Some text
  </my-directive>
  {{Info.Version}}
  <script type="text/ng-template" id='my-directive.html'>
    <div>Hello, {{Info.Version}}</div>
  </script>
</body>
</html>

JS

var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.Info = {};
  $rootScope.Info.Name = 'rootScope';
  $rootScope.Info.Version = '1.0.0.1';
});
app.directive('myDirective', function() {
  return {    
    restrict: 'E',
    templateUrl: 'my-directive.html',
    scope: false
  };
});

Batarang

From what I have seen, $rootScope is never displayed (but I'm guessing it would be labeled Scope (001) if it was).

When I change scope to true in the JS:

app.directive('myDirective', function() {
  return {    
    restrict: 'E',
    templateUrl: 'my-directive.html',
    scope: true
  };
});

It appears that $rootScope is pushed down to Scope (002):

Can somebody please explain what is happening? Why does $rootScope appear to be pushed down? What is above it then? Here is jsbin link: http://jsbin.com/udALigA/1/

Answers


normally directives create their own scope (in this case Scope (002)), but when you set scope: true in myDirective it will inherit the scope of the parent element.

at least, that's what i'm assuming is happening here as I've never seen it done that way before. Normally you would use scope to define certain variables within your directive so that you could pass in parameters with the html tag like so:

<my-directive someVar="true">
  Some text
</my-directive>

then you could pull the value of someVar into the directive by using:

scope: {
  someVar: '@' //or '=' if you wanted two-way binding
}

then you could use someVar in a controller that you linked to the directive.

a more common way of pulling down the scope of the parent element is by using the transclude assignment in the directive:

transclude: true

Need Your Help

crosshair tool, is there one? Visual studio 2008

c# visual-studio-2008

I am doing some image sampling. What my question is, is there a 'crosshair' tool in visual studio? I want to have several instances on a single form, be able to move them around and then sample t...

Attempting to initialise map that takes an object as value within a constructor

c++ class map

I've been looking around trying to solve this problem, and the closest I got was this question How do you initialize a map which takes a struct as value?, however it didn't seem to work.