Contents
  1. 1. AngularJS之$timeout
    1. 1.1. 问题
    2. 1.2. 过程+结果

AngularJS之$timeout

问题

需求:用户登录时,如果用户名或密码输入框输入错误,予以相应的错误提示并将错误提示实现类似于jQueryfadeOut()效果,几秒后自动消失。

使用 ng-showng-if 来显示对应错误,这2个ng指令属性默认值为false

controller work起来触发了相应的条件时,controller会将对应的 ng-showng-if 值置为 true, 并给对应的错误信息变量赋值.

过程+结果

html部分

1
2
3
<p class="error-info">
<span class="text-error text-danger" ng-show="isError">{{errorInfo}}</span>
</p>

#双大括号在某些条件不友好,可使用 ng-cloak
参考:
http://lomo.space/2016/12/21/angular-study-note/#Angular表达式

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var loginAPP = angular.module("loginApp", ['loginModel']);
loginAPP.controller('loginAppController', function($scope, $http, loginService) {
$scope.loginLdap = function() {
var username = $scope.username;
var password = $scope.password;
//影藏错误信息, 使用setTimeout简单实现fadeOut功能(忽略动画)
setTimeout(function() {
$scope.isError = false;
//$scope.errorInfo = "";
$scope.$apply(); // important !!!
}, 3000);
}
if (username === undefined || password === undefined) {
$scope.isError = true;
$scope.errorInfo = "用户名/密码不能为空!";
}
};
});

当触发条件后,JS手动修改的model 的值,model被修改后并未通知AngulaJS, 所以ng 不会主动去update view, 需要手动调用 $scope.$apply(); .

$scope.$apply() 这种无参形式调用,不推荐!应该将对应的函数作为一个参数传给$apply(),Angular的 $apply()会将传入的参数function包装进 try catch 块儿中,当参数函数抛异常时就能被catch块儿捕获。

修改后:

1
2
3
$timeout(function() {
$scope.isError = false;
}, 2000);

总结:当使用原生JS或其它非AngularJS内置函数/方法更新了Model后都需要手动调用 $apply() 以此来通知Angular的 watcher , watcher 被触发后,Angular就会检测scope模型model。

参考:
http://blog.csdn.net/dm_vincent/article/details/38705099


Creative Commons License
本文由Lomo创作和发表,采用Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License进行许可.
转载请注明作者及出处,本文作者为Lomo,本文标题为angularjs之timeout.
Contents
  1. 1. AngularJS之$timeout
    1. 1.1. 问题
    2. 1.2. 过程+结果