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

Question

我的问题与 this question 中的问题类似，当我们知道要删除的范围变量时，这才有效。然而，我正在寻找一些通用的东西，比如删除该指令所附加的所有元素的变量，只要它们隐藏起来。我尝试注入(inject) 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") 在范围被销毁时起作用 - 并不总是在元素被“销毁”时起作用(或从 DOM 中删除)。在您的情况下，它可以工作，因为 ng-if 创建了一个子作用域，但是，完全有可能一个元素被另一个指令删除，而它“生存”的作用域却没有被销毁。在这种情况下，您可能需要使用 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];
   }
})