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>