AngularJS 的 Scope
作用域是 HTML（视图）和 JavaScript（控制器）之间的链接。作用域是一个具有可用方法和属性的对象。作用域可应用于视图和控制器。如何使用范围，在 angularjs 中创建控制器时，可以将 $scope 对象作为参数传递：
<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>
复制代码
将 scope 对象添加到控制器时，视图（HTML）可以获得这些属性。在视图中，不需要添加 $scope 前缀，只需添加属性名称，例如：｛carname｝。angularjs 的应用程序组成如下：视图，即 HTML。模型，当前视图中可用的数据。控制器，即 JavaScript 函数，可以添加或修改属性。范围是一个模型。Scope 是一个 JavaScript 对象，具有可在视图和控制器中使用的属性和方法。
<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>点我</button> </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; };});</script>
复制代码
Scope 作用范围
了解当前使用的范围非常重要。在上述两个示例中，只有一个作用域，因此处理起来相对简单。然而，在大型项目中，HTML DOM 中有多个作用域。此时，需要知道哪个范围对应于使用的范围。
<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>
复制代码
根范围
所有应用程序都有一个rootscope，它可以作用于ng应用程序指令中包含的所有HTML元素。rootscope 可以在整个应用程序中使用。它是每个控制器中作用域的桥梁。rootscope 定义的值可以在每个控制器中使用。
<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>
复制代码
AngularJS 服务(Service)
什么是服务？在 angularjs 中，服务是可以在 angularjs 应用程序中使用的函数或对象。Angularjs 拥有 30 多个内置服务。有一个 $location 服务可以返回当前页面的 URL 地址。
var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl();});
复制代码
为什么要使用服务？在许多服务中，例如location服务，它可以使用DOM中存在的对象，例如窗口位置对象，但是窗口位置对象在angularjs应用程序中有一定的限制。Angularjs将始终监视应用程序并处理事件更改。Angularjs使用location 服务而不是窗口。location 对象更好。
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; });});
复制代码
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000);});
复制代码
Angularjs$interval 服务对应于 JS 窗口 Setinterval 函数。
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000);});
复制代码
要使用自定义服务，需要在定义控制器和设置依赖项时独立添加它：
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});
复制代码
app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255);});
复制代码
从对象数组获取值时，可以使用过滤器：
<ul><li ng-repeat="x in counts">{{x | myFormat}}</li></ul>
复制代码
评论