隐藏时从 $scope 中删除所有 ng-model 变量

Question

我的问题与 this question 中的问题类似，这在我们知道要删除的范围变量时有效。但是我正在寻找一些通用的东西，比如删除这个指令附加到的所有元素的变量，只要它们被隐藏。我尝试注入 ngModel 并尝试设置为 null 或删除，但似乎不起作用。

这就是我想要做的： plunk

myModule.directive('destroyY', function(){
         return{
          restrict:'A',
          require: '?ngModel',
          link: function(scope, elem, attrs, ngModel) {

            scope.$on('$destroy', function(){
             console.log(ngModel);

             ngModel=null; // doesn't work
             delete ngModel; // doesn't work

            }) 
          }
         }
        });

非常感谢任何帮助。谢谢！

Answer 1

具体来说，对于与 ng-if 一起使用并使用 require: "ngModel" 的指令，您可以这样做：

 scope.$on("$destroy", function(){
    ngModel.$setViewValue(undefined);
 }

这里还有一件事要注意：

scope.$on("$destroy") 在 scope 被销毁时起作用——并不总是在 element 是 "destroyed" 时（或从 DOM 中删除）。在您的情况下，它可以工作，因为 ng-if 创建了一个子范围，但是，一个元素完全有可能被另一个指令删除，而没有 "lived" 它被销毁的范围。在这种情况下，您可能希望使用 elem.on("$destroy").

编辑：

确实，如评论中所述，这不会删除实际键 - 只是设置该键的值。如果您考虑一下，这是正确的做法，因为密钥可以是 setter 函数 (ngModel supports setter/getter functions).

虽然我不建议这样做，但您可以仍然从范围中删除属性，虽然这是一种丑陋的方法，显然 Angular.

您需要获取父对象表达式（例如form）及其属性表达式（例如y），然后删除属性。请注意，如果没有点符号 (".")，那么 ngModel 会在被销毁的范围上设置值，因此我们会关心它。为此，您需要使用 $parse:

var modelExp = attrs.ngModel;
var idxOfDot = modelExp.lastIndexOf(".");
var parentExp = modelExp.substring(0, idxOfDot);
var propExp = modelExp.substring(idxOfDot + 1);

var parsedParentExp = $parse(parentExp);

scope.$on("$destroy", function(){
   var p = parsedParentExp(scope);
   if (p){
      delete p[propExp];
   }
})

隐藏时从 $scope 中删除所有 ng-model 变量

Remove all ng-model variables from $scope when hidden

angularjs

angular-directive