A Scope is an object and working as a interface between view and controller in angular JS. That means, scope is a javaScript object having some methods and properties which are accessible from both the view & controller.
Accessing controller scope properties into view (HTML): We can access the controller property into our views.Here we are showing by following example...
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myfirstApp" ng-controller="firstCtrl">
<input ng-model="mycompanyname">
<p>{{mycompanyname}}</p>
</div>
<script>
var app = angular.module('myfirstApp', []);
app.controller('firstCtrl', function($scope) {
$scope.mycompanyname = "Evon Tech, Dehardun";
});
</script>
<p>The property "mycompanyname" added in the controller, and can be fetched in the view by using the {{ }} brackets.</p>
</body>
</html>
The property "mycompanyname" added in the controller, and can be fetched in the view by using the {{ }} brackets.
In this following demo when we change the demoname in the input box, the changes will affect the model, and the demoname property in the controller.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="demoApp" ng-controller="demoCtrl">
<input ng-model="demoname">
<p>My angular demo app name is: <strong>{{demoname}}</strong></p>
</div>
<script>
var app = angular.module('demoApp', []);
app.controller('demoCtrl', function($scope) {
$scope.demoname = "Demo app";
});
</script>
<p>When we change the demoname in the input box, the changes will affect the model, and the demoname property in the controller.</p>
</body>
</html>
0 Comment(s)