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

Question

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

我尝试在指令的模板部分传递 "unfocused" 模板，并像这样绑定到 link 中的焦点事件：

   post: function (scope, element, attrs) {

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

但它会产生错误（输入是 "unfocused" 模板）

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

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

Answer 1

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

Answer 2

如果条件为假，

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

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

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

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

AngularJS: Replace element template on focus

javascript

jquery

angularjs

angularjs-directive

angularjs-templates