javascript - AngularJS：在焦点上替换元素模板

Question

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

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

   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

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

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

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

Answer 2

您可以使用 ng-switch 指令并仅显示那些必须在焦点上显示的模板。