javascript - 以 Angular 触发输入事件

Question

我有 Angular 指令。类似于带有搜索的多选功能。我想在单击清除图标后清除查询。这是代码:

模板:

<div multiselect>
    <ul role="container">
        <li ng-repeat="(k,v) in ::propertyModel.getAllowedValues()" ng-show="isSelected(k);">
            {{v}}
            <span class="icon-close" ng-click="handleOptionRemove(k);" ng-show="!singleSelect"></span>
        </li>
    </ul>
    <div role="opener" class="icon-plus"></div>
    <div role="dropdown" class="closed">
        <div role="search">
            <span class="icon-magnifier"></span>
            <span class="icon-close" ng-click="handleSearchClear();"></span>
            <input type="text" placeholder="Type to search">
        </div>
        <ul role="options">
            <li ng-repeat="(k,v) in ::propertyModel.getAllowedValues()" ng-show="!isSelected(k) && found(k);" ng-click="handleOptionSelect(k);">{{v}}</li>
            <li disabled ng-show="foundItems.length === 0 && queryString !== ''">There is no results found</li>
        </ul>
    </div>
</div>

指令:

var input= element.find('input');

[...]
function handleSearchInput(){
    scope.foundItems= [];
    scope.queryString= input[0].value.toLocaleUpperCase();
    for(var o in allowedValues) if(allowedValues.hasOwnProperty(o))
        if(allowedValues[o].toLocaleUpperCase().indexOf(scope.queryString)!== -1)
            scope.foundItems.push(o);
    scope.$apply();
}

[...]

scope.handleSearchClear = function(){
    input[0].value='';
    input.triggerHandler('input');
};

[...]
input.bind('input', handleSearchInput);

点击后我有

Error: [$rootScope:inprog] $apply already in progress[...]

在控制台上。

如何正确“清除”此输入的值？

Answer 1

这是我在 Jasmine 测试中清除元素的操作，也许这会有所帮助:

var myInput = input[0]; // get the input somehow
angular.element(myInput).val('').trigger('input');

我确实同意 tymeJV 的建议，即尽可能从模型开始工作。然后你最终会得到这样的结果:

$scope.model.myfieldval = '';
$scope.model.someOtherFieldVal = '';
$scope.form.myFormName.$setPristine();

希望这对您有所帮助。