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

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