This is interesting question and little bit confusion about
$scope and scope and how to differentiate to in controller and directive both
case in Angularjs.
In the case of controller, When you are using $scope in
controller.
The injection inject scope based on matching valuable name
($scope). In case when we using scope as name its not work.
The code look like.
{{
app.controller("MyController", ['$scope', '$http', function (i, j) {
console.log("$scope : " + i);
console.log("scope : " + j);
}
]);
}}
In the case of directive, Injection work position based. So
you take your name anything like i, j etc.
Just you can say look like scope, element, attar and controller.
That means the 1st element is always scope object. It must
be.
The code look like.
{{
app.directive("MyDirective", function () {
return {
link: function ($scope, element,
attrs, controller) {
console.log($scope);
console.log(element);
}
}
});
}}
You can seen the main difference in console log in your
browsers.
The $scope log a object in controller but the scope log a function.
The example code as given below. You can execute the code in
browsers and see the console log.
Example 1.
<!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 (i, j) {
console.log("$scope : " + i);
console.log("scope : " + j);
}
]);
app.directive("MyDirective", function () {
return {
link: function ($scope, element, attar)
{
console.log($scope);
console.log(element);
}
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div>$scope vs. scope</div>
</div>
</body>
</html>
Example 2 This is used to display multiple rows in page using $scope.
<!DOCTYPE
html>
<html>
<head
lang="en">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"> </script>
<script type="text/javascript">
var ng = angular.module("app", []);
ng.controller("controller", function($scope)
{
var rows = $scope.rows = [];
for (i = 0; i < 10; i++) {
rows.push({
id: i,
name: 'Row ' + i + ' Name ' + i
})
}
});
</script>
</head>
<body
ng-app="app">
<div ng-controller="controller">
<div>
<div ng-repeat="row in rows"
ng-bind="row.name"></div>
</div>
</div>
</body>
</html>