如何在模板中的输入处使用Angular的ngFocus指令(或嵌入在Ionic Framework中的任何指令)向元素添加类？

Question

我有这样的模板:

    <label class="item item-input"
           ng-class="{'focus':authData.username.focus}"> <--add class here if input:focus
        <span class="input-label">Username</span>
        <input type="text"
               name="username"
               ng-model="authData.username"
               ng-focus="" <--check if focus
               required ng-minlength="5" ng-maxlength="20">
    </label>

如何检查输入是否具有焦点并将类添加到标签中？是否可以在控制器中没有外部功能？

Answer 1

<label class="item item-input"
           ng-class="{'focus':focus===true}">
        <span class="input-label">Username</span>
        <input type="text"
               name="username"
               ng-model="authData.username"
               ng-focus="focus=true" ng-blur="focus=false"
               required ng-minlength="5" ng-maxlength="20">
    </label>

使用ngFocus和ngBlur指令检测元素上的焦点更改,并相应地将var的值更新focus为true/false.