Again interesting topic with angular js is scope.Many people face problem in understanding same.
i have come up with very good examples so beginners can understand it.
1)Shared scope: This is scenario where angular js directive are using variables ,objects and functions from parent scope inside directive.
app.directive("myname", function ()
{
return {
template: "<h1>{{name}}</h1>"
};
} ) ;
In this example we are using "name " variable but how directive is getting this?
answer is it will search this variable first in directive and if it wont get it ,it will start searching in all parents .When is gets this variable in parent it will use that.
Below is complete example for shared scope:
application.js :
var app = angular.module("firstapp", []);
app.config(function(myproviderProvider)
{
console.log(myproviderProvider);
}
)
app.service('myservice',function()
{
var num=Math.random();
this.name="This is service";
});
app.factory('myfactory',function()
{
var factory={};
factory.name="This is factory";
return factory;
});
app.provider('myprovider',function(){
return{
setname:function()
{
surname:"hello all"
},
$get:function(){
return{
name:"This is provider"
}
}
}
});
app.filter('base',function(){
var something=function(input,base)
{
console.log("input:"+input);
console.log("base:"+base);
return input+base;
}
return something;
})
app.directive("myname", function ()
{
return {
template: "<h1>{{name}}</h1>"
};
} ) ;
app.controller('firstController',function($scope,myservice,myfactory,myprovider)
{
console.log(myfactory);
console.log(myservice);
console.log(myprovider);
$scope.name1="Sagar";
$scope.greetings=[myservice.name,myfactory.name,myprovider.name];
$scope.counter=0;
$scope.$watch('name',function(newvalue,old){
$scope.counter++;
console.log(old);
})
}
)
index.html :
<!DOCTYPE html>
<html>
http://js/angular.min.js
http://js/application.js
<body ng-app="firstapp">
{{counter}}
</body>
</html>
Output:In output you can see whatever we are typing in text box it is getting displayed in h1 tag.We are using directive in html as <myname></myname> so it willbe replaced by
<h1>{{name}}</h1> and it will replace {{name}} by value typed in text box because we are using ng-model=input for this text box.
name variable is belongs to controller and its parent scope for directive so it is shared by both
Isolate Scope:
Now i am editing directive code little bit to create isolated scope in directive.I am just
adding parameter scope:{} or scope:false so it will create separate scope object for directive and its not same as parent so if this time we type anything into text box it will not reflect in h1 tag.
app.directive("myname", function ()
{
return {
scope:{},
template: "<h1>My name:{{name}}</h1>"
};
} ) ;
application.js
var app = angular.module("firstapp", []);
app.config(function(myproviderProvider)
{
console.log(myproviderProvider);
}
)
app.service('myservice',function()
{
var num=Math.random();
this.name="This is service";
});
app.factory('myfactory',function()
{
var factory={};
factory.name="This is factory";
return factory;
});
app.provider('myprovider',function(){
return{
setname:function()
{
surname:"hello all"
},
$get:function(){
return{
name:"This is provider"
}
}
}
});
app.filter('base',function(){
var something=function(input,base)
{
console.log("input:"+input);
console.log("base:"+base);
return input+base;
}
return something;
})
app.directive("myname", function ()
{
return {
scope:{},
template: "<h1>My name:{{name}}</h1>"
};
} ) ;
app.controller('firstController',function($scope,myservice,myfactory,myprovider)
{
console.log(myfactory);
console.log(myservice);
console.log(myprovider);
$scope.name1="Sagar";
$scope.greetings=[myservice.name,myfactory.name,myprovider.name];
$scope.counter=0;
$scope.$watch('name',function(newvalue,old){
$scope.counter++;
console.log(old);
})
}
)
index.html
<!DOCTYPE html>
<html>
http://js/angular.min.js
http://js/application.js
<body ng-app="firstapp">
{{counter}}
</body>
</html>
Output:
I am writing "Hello" in text box but its not getting displayed after My name: becuase we have added scope:{} parameter in directive.This is called isolated scope no variables are shared from controller.
i have come up with very good examples so beginners can understand it.
1)Shared scope: This is scenario where angular js directive are using variables ,objects and functions from parent scope inside directive.
app.directive("myname", function ()
{
return {
template: "<h1>{{name}}</h1>"
};
} ) ;
In this example we are using "name " variable but how directive is getting this?
answer is it will search this variable first in directive and if it wont get it ,it will start searching in all parents .When is gets this variable in parent it will use that.
Below is complete example for shared scope:
application.js :
var app = angular.module("firstapp", []);
app.config(function(myproviderProvider)
{
console.log(myproviderProvider);
}
)
app.service('myservice',function()
{
var num=Math.random();
this.name="This is service";
});
app.factory('myfactory',function()
{
var factory={};
factory.name="This is factory";
return factory;
});
app.provider('myprovider',function(){
return{
setname:function()
{
surname:"hello all"
},
$get:function(){
return{
name:"This is provider"
}
}
}
});
app.filter('base',function(){
var something=function(input,base)
{
console.log("input:"+input);
console.log("base:"+base);
return input+base;
}
return something;
})
app.directive("myname", function ()
{
return {
template: "<h1>{{name}}</h1>"
};
} ) ;
app.controller('firstController',function($scope,myservice,myfactory,myprovider)
{
console.log(myfactory);
console.log(myservice);
console.log(myprovider);
$scope.name1="Sagar";
$scope.greetings=[myservice.name,myfactory.name,myprovider.name];
$scope.counter=0;
$scope.$watch('name',function(newvalue,old){
$scope.counter++;
console.log(old);
})
}
)
index.html :
<!DOCTYPE html>
<html>
http://js/angular.min.js
http://js/application.js
<body ng-app="firstapp">
My First Heading
{{name}}{{counter}}
</html>
Output:In output you can see whatever we are typing in text box it is getting displayed in h1 tag.We are using directive in html as <myname></myname> so it willbe replaced by
<h1>{{name}}</h1> and it will replace {{name}} by value typed in text box because we are using ng-model=input for this text box.
name variable is belongs to controller and its parent scope for directive so it is shared by both
Isolate Scope:
Now i am editing directive code little bit to create isolated scope in directive.I am just
adding parameter scope:{} or scope:false so it will create separate scope object for directive and its not same as parent so if this time we type anything into text box it will not reflect in h1 tag.
app.directive("myname", function ()
{
return {
scope:{},
template: "<h1>My name:{{name}}</h1>"
};
} ) ;
application.js
var app = angular.module("firstapp", []);
app.config(function(myproviderProvider)
{
console.log(myproviderProvider);
}
)
app.service('myservice',function()
{
var num=Math.random();
this.name="This is service";
});
app.factory('myfactory',function()
{
var factory={};
factory.name="This is factory";
return factory;
});
app.provider('myprovider',function(){
return{
setname:function()
{
surname:"hello all"
},
$get:function(){
return{
name:"This is provider"
}
}
}
});
app.filter('base',function(){
var something=function(input,base)
{
console.log("input:"+input);
console.log("base:"+base);
return input+base;
}
return something;
})
app.directive("myname", function ()
{
return {
scope:{},
template: "<h1>My name:{{name}}</h1>"
};
} ) ;
app.controller('firstController',function($scope,myservice,myfactory,myprovider)
{
console.log(myfactory);
console.log(myservice);
console.log(myprovider);
$scope.name1="Sagar";
$scope.greetings=[myservice.name,myfactory.name,myprovider.name];
$scope.counter=0;
$scope.$watch('name',function(newvalue,old){
$scope.counter++;
console.log(old);
})
}
)
index.html
<!DOCTYPE html>
<html>
http://js/angular.min.js
http://js/application.js
<body ng-app="firstapp">
My First Heading
{{name}}{{counter}}
</html>
Output:
I am writing "Hello" in text box but its not getting displayed after My name: becuase we have added scope:{} parameter in directive.This is called isolated scope no variables are shared from controller.
No comments:
Post a Comment