javascript - AngularJS:替换焦点上的元素模板

Question

我遇到了以下问题:我的客户希望我的 Angular Directive(指令)能够完全改变焦点的外观。这对我来说意味着，当用户单击该元素时，我需要完全替换模板。我在互联网上找不到答案，所以决定询问。

我尝试在指令的模板部分传递“未聚焦”模板，并绑定(bind)到链接中的焦点事件，如下所示:

   post: function (scope, element, attrs) {

        element.bind('focus',function(event){
          element.html('<span..../span>');
          $compile(element)(scope);
        });
   }

但它会产生错误(输入是“未聚焦”的模板)

Uncaught Error: [$compile:multidir] Multiple directives 
[ngModel, ngModel] asking for 'ngModel' controller on: <input....

该解决方案需要与我必须使用的 Angular 1.2 兼容。

Answer 1

如果条件为 false，

ng-if 将根本不会渲染该元素。在您的评论中，输入嵌套在跨度中，因此跨度是根元素。您可以将跨度和输入作为模板中的顶级元素。

<input ng-if="focusCondition"/>
<span ng-if="!focusCondition"></span>

那么渲染的元素应该是根元素。