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>