"use strict";
angular.module('plunker', [ ])
.controller('MainCtrl', function($scope){
console.clear();
$scope.foo = 'Main';
})
/**********************
1st ctrl & drctv
**********************/
.controller('FirstCtrl', function($scope){
$scope.foo = "First";
})
.directive('firstDirective', function(){
return {
restrict: 'EA',
controller: function($scope){ },
template: '<div><label>first drctv foo: {{ foo }} </label><input type="text" ng-model="foo" /></div>'
};
})
/**********************
2nd ctrl & drctv
**********************/
.controller('SecondCtrl', function($scope){
$scope.foo = "Second";
})
.directive('secondDirective', function(){
return {
restrict: 'EA',
scope: true,
template: '<div><label>second drctv foo: {{ foo }} </label><input type="text" ng-model="foo" /></div>'
};
})
/**********************
3rd ctrl & drctv
**********************/
.controller('ThirdCtrl', function($scope){
$scope.foo = "Third";
})
.directive('thirdDirective', function(){
return {
restrict: 'EA',
scope: {},
template: '<div><label>third drctv foo: {{ foo }} </label><input type="text" ng-model="foo" /></div>'
};
})
/**********************
4th ctrl & drctv
**********************/
.controller('FourthCtrl', function($scope){
$scope.foo = "Fourth";
})
.directive('fourthDirective', function(){
return {
restrict: 'EA',
scope: {
bar: '@',
another: '@baz'
},
template: '<div><label>fourth drctv foo: {{ bar }}</label><input type="text" ng-model="bar" /><div>baz: {{ another }} </div></div>'
};
})
/**********************
5th ctrl & drctv
**********************/
.controller('FifthCtrl', function($scope){
$scope.foo = "Fifth";
})
.directive('fifthDirective', function(){
return {
restrict: 'EA',
scope: {
bar: '=bar'
},
template: '<div><label>fifth drctv foo: {{ bar }}</label><input type="text" ng-model="bar" /></div>'
};
})
/**********************
6th ctrl & drctv
**********************/
.controller('SixthCtrl', function($scope){
$scope.foo = "Fifth";
$scope.showOnFocus = function(e){
console.log('showOnFocus', e);
};
})
.directive('sixthDirective', function(){
return {
restrict: 'EA',
scope: {
foo: '&focusMe'
},
template: '<div><label>sixth drctv qux</label><input type="text" /></div>',
link: function(scope, element){
element.find('input').on('focus', function(e){
scope.$apply(function(){
scope.foo({ myEvent: e });
});
})
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<!--script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script-->
<!--script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-resource.js"></script-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>
AngularJS isolate scopes explained
</h1>
<small>Controllers: borders around, directives: gray background. <br/>Tutorial credits: <a href="http://codetunnel.com/isolate-scopes-explained/" target="_blank">Codetunnel</a></small>
<h2><i>{{ foo }}</i> controller</h2>
<section ng-controller="FirstCtrl">
<h3>1. <i>{{ foo }}</i> controller, directive: parent scope<br/>scope: false </h3>
<small>
By default a directive shares whatever scope was defined above it.
Not specifying the scope property in a directive is equivalent to specifying scope: false.
The directive can override variables in the controller's scope and vice versa.
</small>
<label>first ctrl foo: </label>
<input type="text" ng-model="foo" />
<div class="drctv" first-directive></div>
</section>
<section ng-controller="SecondCtrl">
<h3>2. <i>{{ foo }}</i> controller, directive: child scope <br/>scope: true</h3>
<small>
The directive gets its own scope that inherits prototypically from the parent scope.
This is exactly the same as if you replaced the directive with a nested controller instead.
</small>
<label>second ctrl foo: </label>
<input type="text" ng-model="foo" />
<div class="drctv" second-directive></div>
</section>
<section ng-controller="ThirdCtrl">
<h3>3. <i>{{ foo }}</i> controller, directive: isolated scope <br/>scope: { }</h3>
<small>
Directive isolate scope: a scope that exists separately with no prototypal inheritance from the parent controller; a clean slate.
</small>
<label>third ctrl foo: </label>
<input type="text" ng-model="foo" />
<div class="drctv" third-directive></div>
</section>
<section ng-controller="FourthCtrl">
<h3>4. <i>{{ foo }}</i> controller, <br/>directive scope: { foo: '@' }</h3>
<small>
The @ symbol tells angular that this is a one-way bound value.
In other words, it simply took the value of the attribute and set it as the value of a scope variable with the same name.
By default just specifying the @ means that the attribute name should be the same as the scope property name.
This is just for convenience, but you can specifiy a different attribute name too.
</small>
<label>fourth ctrl foo: </label>
<input type="text" ng-model="foo" />
<div class="drctv" fourth-directive bar="hello {{foo}}" baz="another parameter"></div>
</section>
<section ng-controller="FifthCtrl">
<h3>5. <i>{{ foo }}</i> controller, <br/>directive scope: { foo: '=' }</h3>
<small>
The '=' creates two way data binding between the parent scope and the directives isolate scope.
Variables passed this way can be changed from the controller and the directive too.
</small>
<label>fifth ctrl foo: </label>
<input type="text" ng-model="foo" />
<div class="drctv" fifth-directive bar="foo"></div>
</section>
<section ng-controller="SixthCtrl">
<h3>6. <i>{{ foo }}</i> controller, <br/>directive scope: { qux: '&' }</h3>
<small>
With the '&' you can pass a parent controller's function call to the directive.
</small>
<label>sixth ctrl foo: </label>
<input type="text" ng-model="foo" />
<div class="drctv" sixth-directive focus-me="showOnFocus(myEvent)"></div>
</section>
</body>
</html>
body{
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}
section,
h2{
margin: 1em 0;
border: 2px solid #e7e7e7;
padding: .5em;
}
.drctv{
background-color: #e7e7e7;
}
small{
display: block;
margin: .5em;
font-style: italic;
}