What about a $scope in Angularjs ?

What is $scope in Angularjs?

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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.