Skip to content

Instantly share code, notes, and snippets.

@mreis1

mreis1/index.html

Created January 14, 2015 01:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mreis1/37cbbc609a4760a57bb7 to your computer and use it in GitHub Desktop.
Save mreis1/37cbbc609a4760a57bb7 to your computer and use it in GitHub Desktop.
Download ZIP
Understanding how to isolate scopes using directives // source http://jsbin.com/sajifo
Raw
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<meta name="description" content="Understanding how to isolate scopes using directives" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<style id="jsbin-css">
body{
font-family:'Helvetica';
line-height: 1.5em;
padding:20px;
}
input{
border: 1px solid #ddd;
padding: 6px 15px;
}
.red{
color:red;
}
.block{
display:block;
}
</style>
</head>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<body>
<div ng-controller="foo">
<span class="red block">fooCtrl.name =>{{name}}</span>
<span class="red block">fooCtrl.age =>{{age}}</span>
<foo-dir></foo-dir>
<bar-dir></bar-dir>
<rum-dir name="name"></rum-dir>
</div>
<script id="jsbin-javascript">
angular.module('myApp',[])
.controller('foo', function($scope){
$scope.name = 'cat';
$scope.age = 12;
})
//changes on dir scope affect the parent scope
.directive('fooDir',function(){
return {
'restrict': 'E',
template: '<br/>"foo-dir"<br/>{{name}}<input ng-model="name">',
'controller': function($scope){
$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
//by setting the scope: true, changes in the local scope don't affect the parent scope anymore and vise-versa
.directive('barDir',function(){
return {
'restrict': 'E',
scope:true,
template: '<br/><br/> "bar-dir"<br/>{{name}}<input ng-model="name">',
'controller': function($scope){
$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
//creating a two-way binding allow us to update parentScopes and get updated if parent scope changes while keeping a privateScope for the rest of the properties: For example, age exists on parentScope and inside of the scope but because the scope is private, chaning the parent scope doesn't reflect itself inside the scope and vise-versa. In the other hand, specified two-way binded properties get updated when the parent scope prop changes and the same applies when it changes and updates the parent scope
.directive('rumDir',function(){
return {
'restrict': 'E',
scope:{
'name':'=name'
//'{desiredScopePropName}':'={attributeName}' onde o valor do atributo é bindado ao nome desejado
},
template: '<br/><br/>"rum-dir"<br/>{{name}}<input ng-model="name"><input ng-model="age">',
'controller': function($scope){
$scope.age = 20;
//$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
</script>
<script id="jsbin-source-css" type="text/css">body{
font-family:'Helvetica';
line-height: 1.5em;
padding:20px;
}
input{
border: 1px solid #ddd;
padding: 6px 15px;
}
.red{
color:red;
}
.block{
display:block;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">angular.module('myApp',[])
.controller('foo', function($scope){
$scope.name = 'cat';
$scope.age = 12;
})
//changes on dir scope affect the parent scope
.directive('fooDir',function(){
return {
'restrict': 'E',
template: '<br/>"foo-dir"<br/>{{name}}<input ng-model="name">',
'controller': function($scope){
$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
//by setting the scope: true, changes in the local scope don't affect the parent scope anymore and vise-versa
.directive('barDir',function(){
return {
'restrict': 'E',
scope:true,
template: '<br/><br/> "bar-dir"<br/>{{name}}<input ng-model="name">',
'controller': function($scope){
$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
//creating a two-way binding allow us to update parentScopes and get updated if parent scope changes while keeping a privateScope for the rest of the properties: For example, age exists on parentScope and inside of the scope but because the scope is private, chaning the parent scope doesn't reflect itself inside the scope and vise-versa. In the other hand, specified two-way binded properties get updated when the parent scope prop changes and the same applies when it changes and updates the parent scope
.directive('rumDir',function(){
return {
'restrict': 'E',
scope:{
'name':'=name'
//'{desiredScopePropName}':'={attributeName}' onde o valor do atributo é bindado ao nome desejado
},
template: '<br/><br/>"rum-dir"<br/>{{name}}<input ng-model="name"><input ng-model="age">',
'controller': function($scope){
$scope.age = 20;
//$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})</script></body>
</html>
Raw
jsbin.sajifo.css
body{
font-family:'Helvetica';
line-height: 1.5em;
padding:20px;
}
input{
border: 1px solid #ddd;
padding: 6px 15px;
}
.red{
color:red;
}
.block{
display:block;
}
Raw
jsbin.sajifo.js
angular.module('myApp',[])
.controller('foo', function($scope){
$scope.name = 'cat';
$scope.age = 12;
})
//changes on dir scope affect the parent scope
.directive('fooDir',function(){
return {
'restrict': 'E',
template: '<br/>"foo-dir"<br/>{{name}}<input ng-model="name">',
'controller': function($scope){
$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
//by setting the scope: true, changes in the local scope don't affect the parent scope anymore and vise-versa
.directive('barDir',function(){
return {
'restrict': 'E',
scope:true,
template: '<br/><br/> "bar-dir"<br/>{{name}}<input ng-model="name">',
'controller': function($scope){
$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
//creating a two-way binding allow us to update parentScopes and get updated if parent scope changes while keeping a privateScope for the rest of the properties: For example, age exists on parentScope and inside of the scope but because the scope is private, chaning the parent scope doesn't reflect itself inside the scope and vise-versa. In the other hand, specified two-way binded properties get updated when the parent scope prop changes and the same applies when it changes and updates the parent scope
.directive('rumDir',function(){
return {
'restrict': 'E',
scope:{
'name':'=name'
//'{desiredScopePropName}':'={attributeName}' onde o valor do atributo é bindado ao nome desejado
},
template: '<br/><br/>"rum-dir"<br/>{{name}}<input ng-model="name"><input ng-model="age">',
'controller': function($scope){
$scope.age = 20;
//$scope.name = 'dog'; //scope are inherited from parant controller $scope. Try to comment this line to see cat instead of dog
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment