AngularJS Scope(scope)
Scope is the link between HTML (view) and JavaScript (controller).
Scope is an object with available methods and properties.
Scope can be applied to views and controllers.
How to use Scope
When you create a controller in AngularJS, you can pass the $scope object as a parameter:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
When in When the $scope object is added to the controller, the view (HTML) can obtain these properties. In the
view, you do not need to add the $scope prefix, you only need to add the attribute name, such as: {{carname}}.
Scope Overview
AngularJS application consists of the following:
View (view), that is, HTML.
Model (model), the data available in the current view.
Controller (controller), which is a JavaScript function, can add or modify properties.
scope is the model.
A scope is a JavaScript object with properties and methods that can be used in views and controllers.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Scope Scope
It is very important to understand the scope you are currently using.
In the above two examples, there is only one scope, so it is relatively simple to handle, but in large projects, there are multiple scopes in the HTML DOM, then you need to know the scope you are using. Which is the corresponding scope?
Each <li> element can access the current repeating object, which corresponds to a string and is represented by the variable x.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Root Scope
All applications have a $rootScope, which can be applied to all HTML elements included in the ng-app directive .
$rootScope can be applied to the entire application. It is the bridge between scopes in each controller. Values defined with rootscope can be used in each controller.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
<p>注意 $rootScope 在循环对象内外都可以访问。</p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
