📜  AngularJS前缀$和$$如何使用?(1)

📅  最后修改于: 2023-12-03 14:39:14.744000             🧑  作者: Mango

AngularJS前缀$和$$的使用

AngularJS前缀$和$$是AngularJS框架内部使用的预设前缀,用于表示内置的AngularJS服务、指令或简单的变量。

$前缀

$前缀是AngularJS的公共API中最常用的前缀。它用于表示内置AngularJS服务或指令。以下是一些常见的$前缀的使用方法。

$scope

$scope是一个AngularJS控制器中的一个对象。可以使用它来访问和更新控制器中相关的数据和方法。例如:

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
    $scope.title = "Hello, world!";
});

在这个例子中,我们创建了一个名为myController的控制器,然后将$scope对象作为参数注入到控制器中。我们可以使用$scope对象来设置控制器中所需的任何属性。

在HTML代码中,我们可以使用{{}}语法来在页面上引用$scope对象中的属性。例如:

<div ng-controller="myController">
    <h1>{{title}}</h1>
</div>
$http

$http是AngularJS中内置的一个服务,用于从服务器端获取数据。例如:

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $http) {
    $http.get('https://api.github.com/users/angular')
        .then(function(response) {
            $scope.user = response.data;
        });
});

在这个例子中,我们使用$http服务发送一个GET请求来获取Github上AngularJS组织的用户数据。我们在.then()方法(读取响应数据)中将数据赋值给$scope.user对象。我们可以在HTML代码中使用$scope.user.xxx来访问数据。

$timeout

$timeout是AngularJS内置的一个服务,可用于执行延时操作。例如:

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $timeout) {
    $scope.count = 0;
    function incrementCount() {
        $scope.count++;
        $timeout(incrementCount, 1000);
    }
    incrementCount();
});

在这个例子中, 我们创建了一个名为incrementCount()的函数,该函数使用$timeout服务通过1秒钟的延迟来递归调用自己。我们将incrementCount()函数添加到控制器中,然后初始化count属性为0。由于添加了延迟,count属性将每秒钟自增1。

$$前缀

$$前缀是AngularJS框架中用于表示内部属性的预设前缀。它通常不用于开发者的代码中,但在了解$$前缀的用途方面,也非常有用。以下是一个$$前缀的示例。

$$watchers

$$watchers是一个私有属性,用于跟踪在AngularJS应用程序中注册的所有监视器。当$digest循环开始时,AngularJS就会检查每个监视器是否发生了变化。如果有关联的模型发生了变化,则AngularJS会更新相关的数据。以下是一个$$watchers的代码示例。

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
    $scope.count = 0;
    $scope.$watch('count', function(newValue, oldValue) {
        console.log(newValue, oldValue);
    });
    $scope.count++;
});

在这个例子中,我们在$scope对象上添加了一个名为count的属性,并使用$scope.$watch()方法来注册一个监视器。当count属性发生变化时,$watch()方法将新旧值作为参数传递给回调函数。在这个例子中,我们简单地将值打印到控制台中。

在最后一行代码中,我们简单地递增count属性。这将触发$digest循环,并调用我们的$watch()回调函数。

结论

$和$$前缀是AngularJS框架中非常重要的预设前缀,用于表示内置服务、指令、绑定和其他内部属性。了解这些前缀可以帮助您更好地理解AngularJS框架的内部工作原理。