触发角度输入事件

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();

希望这会有所帮助。

Answer 2

好的，看来我跳出Angular上下文了。

我在Angular本身触发的事件回调中使用了handleSearchInput函数，并且将其与Angular的上下文进行了触发，然后我被强制使用标准javascript上下文来使用此函数。 或类似的东西 ;）

无论如何，有一个解决方案。

function handleSearchInput () {
    scope.$apply(function () {   //force Angular context (and scope)
        doSearch();
    });
}

function doSearch () {
    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.handleSearchClear = function () {
    //always in context because of existing in scope
    input[0].value = '';
    doSearch();
};

input.bind('input', handleSearchInput);