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

以角度触发输入事件

2 个答案: