AngularJS：NG-IF |隐藏（删除）NG-模型变量不从$范围中删除 [英] AngularJS : ng-if | Hidden(Removed) ng-model variable not removed from $scope
问题描述
我想了解的工作NG-如果与NG-显示对比度。
阅读文档和经历的相关问题计算器<一后href=\"http://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide\">here,我明白，NG-如果删除DOM元素和内部变量的作用域NG-如果在里面removed.i.e NG-模型变量的'删除'NG-if元素不会出现在$范围。
I am trying to understand the working of ng-if in contrast with ng-show. After reading the docs and going through the related stackoverflow question here, I understand that ng-if removes the DOM element and the scope variables inside that ng-if are removed.i.e ng-model variables inside the 'removed' ng-if element wont appear in $scope.
从角NG-如果文档： -
请注意，当使用被除去的元素ngIf其范围被破坏
并恢复元件时将创建一个新的范围。范围
内ngIf创建从它的使用范围母公司继承原型
遗产。这方面的一个重要含义是，如果使用ngModel
内ngIf绑定到父定义一个javascript原始
范围。
Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope.
考虑以下code片断： -
Consider following code snippet:-
<!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>
这是pretty简单的用例 - 显示第二个数字输入字段只首当大于5
This is pretty simple use case - show the second number input field only when first is greater than 5.
Save（保存）按钮，然后单击代表到保存功能，只输出$范围的形式对象的控制器。
The save button click delegates to 'save' function in the controller which simply prints out the 'form' object of $scope.
输入1： -
输入x = 6，Y = 2
输出1：{X：6，Y：2}
Input 1:- Enter x=6 and y=2 Output 1 : {x: 6, y: 2}
输入2： -
输入x = 3
输出2：{X：3， Y：2 }
我无法理解为什么输出2仍然显示Y = 2。如果其DOM已被去除，不应输出只是{X：3}
I am not able to understand why 'output 2' still shows y =2. If its DOM has been removed, shouldn't the output be just {x:3} ?
如果我想从范围中删除（ngIf-删除）模型，我应该怎么办？
What should I do if I want to remove (ngIf-removed) model from the scope?
感谢
推荐答案
要进一步什么@Chandermani在评论中指出， NG-如果创建的新的的范围，它有它自己的变量。它，然而，中典型从其父继承的范围，因此，如果您现有的父对象上设置属性，比如什么您使用了 form.y 操作，当孩子的范围被破坏，该属性不受影响。
Problem
To further what @Chandermani pointed out in comments, ng-if creates a new scope, which has its own variables. It does, however, prototypically inherit from its parent scope, so if you set a property on an existing parent object, such as what you're doing by using form.y, when the child scope is destroyed, that property remains unaffected.
您可以添加另一个指令为你在，其中删除 NG-如果一个相同的元素C> S于 $从作用域属性摧毁：
You could add another directive to the same element as the one you're setting ng-if on, which deletes the property from the scope on $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的这里的价值就不必检查每个摘要
Note: I saw that @user2334204 posted something similar. I decided to post this anyway because here the value of x won't have to be checked every digest
这篇关于AngularJS：NG-IF |隐藏（删除）NG-模型变量不从$范围中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
