Question

我正在使用从this SO answer获取的Angular 1.0.3的ad-hoc ngIf指令。

// effectively
app.directive("ngIf", function () {                                             
    return function(scope, element, attrs) {                                 
            if (scope.$eval(attrs.ngIf)) {                                      
            } else {                                                            
                element.replaceWith(' ');                                       
            }                                                                   
        }                                                                       
    }                                                                           
});

该元素实际上已被删除。如果元素有ng-model（可能还有其他指令），Angular会抱怨。

<input ng-if="msg == 'foo'" ng-model=msg>

如果msg不是foo，我们会

错误：无控制器：ngModel

这很可能与评估ngModel时被删除的元素有关。

有没有办法重写ngIf指令以便不会发生错误？

JSFiddle example

Answer 1

而不是

element.replaceWith(' ');

使用

element.html('');

它工作正常。这是一个演示：http://jsfiddle.net/sd3px/

这样您就不会删除在编译时建立的Angular属性。

当元素在编译时建立然后在链接处消失时，Angular会变得相当悲伤。

你可以在它自己的ngif版本中看到Angular如何“使用编译状态重新创建元素”（从1.1.5开始的新版本）：https://github.com/angular/angular.js/blob/4612705ec297bc6ba714cb7a98f1be6aff77c4b8/src/ng/directive/ngIf.js

使用1.2测试更新：

我很想知道它如何与1.2.0一起使用。不可否认，你可能只使用Angular的ngif和1.2。尽管如此，您的代码在1.2中使用element.html('');而不是replaceWith进行了一次微小更改。

以下是一名动画片：http://plnkr.co/edit/5jUzTH43OF2PqzMEbSz4?p=preview

删除元素时指令出错

1 个答案: