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 не будет отображать элемент вообще, если условие ложно. В своем комментарии у вас есть вход, вложенный в диапазон, поэтому span является корневым элементом. Вы можете иметь как диапазон, так и ввод в качестве элементов верхнего уровня в своем шаблоне.

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

Тогда элемент, который визуализируется, должен быть корневым элементом.

Answer 2

Вы можете использовать директиву ng-switch и отображать только те шаблоны, которые должны отображаться в фокусе.