A $scope is a JavaScript object. The $scope working between the DOM elements and controller both.
The main role of $scope is to ties the DOM elements that is view to controller.
For Example, Just like MVC [Model-View-Controller], The model work between the view and controller and the Model ties the DOM element/view to controller.
The AngularJs code for $scope with ng-controller
var app = angular.module("myApp", []);app.controller("MyController", ['$scope', '$http', function (key, val) { console.log(key); console.log(val);}]);app.directive("myDirective", function ($http, $parse) { return { link: function ($scope, scope, attrs) { alert($scope); } }}); |
var app = angular.module("myApp", []);
app.controller("MyController", ['$scope', '$http', function (key, val) {
console.log(key);
console.log(val);
}]);
app.directive("myDirective", function ($http, $parse) {
return {
link: function ($scope, scope, attrs) {
alert($scope);
}
}
});
The live example for how to work with $scope as given below.
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("MyController", ['$scope', '$http', function (key, val) { console.log(key); console.log(val); }]); app.directive("myDirective", function ($http, $parse) { return { link: function ($scope, scope, attrs) { alert($scope); } } }); </script></head><body ng-app="myApp"> <div ng-controller="MyController"> <div my-directive="myDirective"></div> </div></body></html> |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("MyController", ['$scope', '$http', function (key, val) {
console.log(key);
console.log(val);
}]);
app.directive("myDirective", function ($http, $parse) {
return {
link: function ($scope, scope, attrs) {
alert($scope);
}
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div my-directive="myDirective"></div>
</div>
</body>
</html>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|