我试图理解ng-if与ng-show的对比.在阅读完文档并在此处查看相关的stackoverflow问题之后,我理解ng-if删除了DOM元素,并且删除了ng-if中的范围变量.在'removed'ng-if元素中的ng-model变量不会出现在$ scope中.
来自Angular ng-if文档: -
请注意,使用ngIf删除元素时,其范围将被销毁,并且在还原元素时会创建新范围.在ngIf中创建的作用域使用原型继承从其父作用域继承.这一点的一个重要含义是,如果在ngIf中使用ngModel绑定到父作用域中定义的javascript原语.
请考虑以下代码段: -
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
</head>
<body data-ng-app="myModule">
<div data-ng-controller="TestController">
<input name="first" type="number" data-ng-model="form.x" placeholder="Enter Number X"/>
<input name="second" type="number" data-ng-if="form.x>5" data-ng-model="form.y" placeholder="Enter Number Y"/>
<input type="button" value="Click" ng-click="save()"/>
</div>
<script type="text/javascript">
var myModule = angular.module("myModule",[]);
myModule.controller("TestController",function($scope){
$scope.form = {};
$scope.form.x = 0;
$scope.form.y = 0;
$scope.save = function(){
console.log($scope.form);
};
});
</script>
</html>
这是一个非常简单的用例 - 只有当first大于5时才显示第二个数字输入字段.
保存按钮单击委托控制器中的"保存"功能,它只打印出$ scope的'form'对象.
输入1: - 输入x = 6,y = 2输出1:{x:6,y:2}
输入2: - 输入x = 3输出2:{x:3,y:2 }
我无法理解为什么'输出2'仍显示y = 2.如果它的DOM已被删除,那么输出不应该只是{x:3}吗？
如果我想从范围中删除(ngIf-removed)模型,我该怎么办？
谢谢
为了进一步了解@Chandermani在评论中指出的内容,ng-if创建了一个新的范围,它有自己的变量.但是,它原型继承自其父作用域,因此如果在现有父对象上设置属性(例如您正在使用的内容)form.y,则在销毁子作用域时,该属性不受影响.
您可以将另一个指令添加到与您正在设置的元素相同的元素ng-if,该delete属性来自范围$destroy:
指示
myModule.directive('destroyY', function(){
return function(scope, elem, attrs) {
scope.$on('$destroy', function(){
if(scope.form.y) delete scope.form.y;
})
}
});
视图
<input ... data-ng-if="form.x>5" destroy-y .../>
注意:我看到@ user2334204发布了类似的东西.我决定发布这个,因为这里不需要检查每个摘要的x值
| 归档时间： |
|
| 查看次数： |
7206 次 |
| 最近记录： |