AngularJS 的Scope

作用域是HTML（视图）和JavaScript（控制器）之间的链接。
作用域是一个具有可用方法和属性的对象。
作用域可应用于视图和控制器。
如何使用范围，在angularjs中创建控制器时，可以将$scope对象作为参数传递：

{{carname}}




1
2
3
4
5
6
7
8
9
10
11
12
13

将scope对象添加到控制器时，视图（HTML）可以获得这些属性。
在视图中，不需要添加$scope前缀，只需添加属性名称，例如：｛carname｝。
angularjs的应用程序组成如下：
视图，即HTML。
模型，当前视图中可用的数据。
控制器，即JavaScript函数，可以添加或修改属性。
范围是一个模型。
Scope是一个JavaScript对象，具有可在视图和控制器中使用的属性和方法。

    
    
{{greeting}}
    点我    

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Scope 作用范围

了解当前使用的范围非常重要。
在上述两个示例中，只有一个作用域，因此处理起来相对简单。然而，在大型项目中，HTML DOM中有多个作用域。此时，需要知道哪个范围对应于使用的范围。

    
{{x}}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

根范围

所有应用程序都有一个$rootscope，它可以作用于ng应用程序指令中包含的所有HTML元素。
$rootscope可以在整个应用程序中使用。它是每个控制器中作用域的桥梁。rootscope定义的值可以在每个控制器中使用。

{{lastname}} 家族成员:


    
{{x}} {{lastname}}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

AngularJS 服务(Service)

什么是服务？
在angularjs中，服务是可以在angularjs应用程序中使用的函数或对象。
Angularjs拥有30多个内置服务。
有一个$location服务可以返回当前页面的URL地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
1
2
3
4

为什么要使用服务？
在许多服务中，例如$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;
    });
});
1
2
3
4
5
6

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});
1
2
3
4
5
6
7

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);
});
1
2
3
4
5
6
7

要使用自定义服务，需要在定义控制器和设置依赖项时独立添加它：

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
1
2
3
4
5

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});
1
2
3

从对象数组获取值时，可以使用过滤器：

{{x | myFormat}}

1
2
3