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

如果条件为false，

ng-if将不会渲染元素。在您的注释中，您将输入嵌套在span中，因此span是根元素。您可以同时将span和input作为模板中的顶级元素。

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

然后渲染的元素应该是根元素。

Answer 2

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

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

2 个答案: