angularjs - Scope creation and batarang -
consider 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> 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 have seen, $rootscope never displayed (but i'm guessing labeled scope (001) if was).
when change scope true in js:
app.directive('mydirective', function() { return { restrict: 'e', templateurl: 'my-directive.html', scope: true }; }); it appears $rootscope pushed down scope (002):
can please explain happening? why $rootscope appear pushed down? above then? here jsbin link: http://jsbin.com/udaliga/1/
normally directives create own scope (in case scope (002)), when set scope: true in mydirective inherit scope of parent element.
at least, that's i'm assuming happening here i've never seen done way before. use scope define variables within directive pass in parameters html tag so:
<my-directive somevar="true"> text </my-directive> then pull value of somevar directive using:
scope: { somevar: '@' //or '=' if wanted two-way binding } then use somevar in controller linked directive.
a more common way of pulling down scope of parent element using transclude assignment in directive:
transclude: true
Comments
Post a Comment