AngularJs 使用 $timeout

本文介绍了一个使用Angular框架进行模块定义、路由配置及控制器设置的简单示例。通过配置路由,页面能够加载指定视图并应用相应的控制器。该示例展示了如何使用$timeout服务来异步更新作用域变量。
angular.module('myApp.test', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'views/homePage/homePage.html',
            controller: 'homePageController'
        });
    }])

    .controller('homePageController', ['$scope', '$timeout', function($scope, $timeout) {
        // ....
        $timeout(function() {
            $scope.finish = true
        1000);
        // ...
}]);


AngularJS 中,定义自定义指令时可以注入依赖项以增强其功能。对于 `.directive('dealerMapliuzi', ...)` 的写法,如果希望注入 `$interval`、`$timeout`、`common`、`$http` 和 `$q` 等服务,必须确保这些服务是有效的,并且遵循 AngularJS 的依赖注入机制。 ### 自定义指令的依赖注入结构 AngularJS 指令的工厂函数可以通过数组注入方式声明依赖项,例如: ```javascript .directive('dealerMapliuzi', ['$interval', '$timeout', 'common', '$http', '$q', function($interval, $timeout, common, $http, $q) { // 指令逻辑 }]); ``` 这种写法是正确的,前提是所有被注入的服务都已正确定义并在应用中可用。 ### 对每个注入项的验证 1. **`$interval`** 这是一个 AngularJS 内置服务,用于执行周期性操作,类似于 `setInterval`,但与 AngularJS 的 digest 循环集成[^1]。可以在指令中安全使用。 2. **`$timeout`** 同样是 AngularJS 提供的核心服务,用于延迟执行代码,等价于 JavaScript 的 `setTimeout`,并能触发 digest 循环。适合用于异步任务。 3. **`common`** AngularJS 本身没有名为 `common` 的内置服务。如果此处指的是某个自定义服务,则必须确保该服务已在模块中注册,并通过 `angular.module().service()` 或 `factory()` 定义[^4]。 4. **`$http`** 这是 AngularJS 的核心 HTTP 客户端服务,用于发起对后端的请求。它返回一个 Promise,支持链式调用和错误处理[^5]。 5. **`$q`** `$q` 是 AngularJS 的承诺(Promise)实现,用于管理异步操作,尤其适用于需要手动控制异步流程的场景[^6]。 ### 示例:完整的指令写法 以下是一个完整的示例,展示了如何正确注入上述服务并使用它们: ```javascript angular.module('myApp') .directive('dealerMapliuzi', ['$interval', '$timeout', 'common', '$http', '$q', function($interval, $timeout, common, $http, $q) { return { restrict: 'E', link: function(scope, element, attrs) { // 使用 $timeout 延迟执行 $timeout(function() { console.log('延迟执行'); }, 1000); // 使用 $interval 定期请求数据 $interval(function() { $http.get('/api/data') .then(function(response) { // 使用 $q 处理异步结果 var deferred = $q.defer(); if (response.data) { deferred.resolve(response.data); } else { deferred.reject('无数据'); } return deferred.promise; }) .then(function(data) { common.processData(data); // 调用自定义 common 服务 }); }, 5000); } }; }]); ``` ### 总结 只要 `common` 是一个已定义的自定义服务,而其他如 `$interval`、`$timeout`、`$http` 和 `$q` 都是 AngularJS 的核心服务,那么将它们一起注入到 `.directive` 的工厂函数中是完全合法且合理的做法。这种方式允许指令访问定时器、HTTP 请求、自定义逻辑以及异步控制等功能,从而构建出更强大的组件。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值