$scope vs scope in angularjs

$scope vs scope in angularjs

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>



ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book