ng-if指令
2016-09-11 本文已影响0人
yb_剑笙
概述
在Angular JS中，可以使用ng-if指令来控制元素是否存在。
实现细节
ng-if标签通过监控绑定的数据，在数据发生变化时，如果为true就存在，为false就不存在。
//显示
$animate.enter(clone, $element.parent(), $element);
//影藏
$animate.leave(previousElements).then(function() {
previousElements = null;
});
从代码可以看出，在元素添加和删除是动过$animate完成的，这说明添加和删除的过程可以动画实现。
另外：ng-if不仅仅可以绑定数据模型，还可以绑定表达式。ng-if具有高优先级(600)，同时还具有terminal属性为true，所以在具有ng-if指令的元素上，很多其它指令是无效的。
示例代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body ng-controller="testCtrl">
<div>
<input type="button" value="click" ng-click="test()">
</div>
<div>
<div ng-if ="data" >test1</div>
<div ng-if ="data >3" >test2</div>
</div>
</body>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script>
angular.module("app",[]).controller("testCtrl",["$scope",function($scope){
$scope.data = 0;
$scope.test = function(){
$scope.data += 1;
if($scope.data > 5){
$scope.data = 0;
}
}
}]);
</script>
</html>
这段代码实现的功能为：当点击按钮，$scope的data值就会自增1，当data大于5时就会还原为0。test1在data不为0时就显示，test2在data大于3时显示。
