python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
$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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions