Question

我已经在自定义dropdownList指令中嵌入了uib typeahead，并且我试图获取input元素以清除条目是否不匹配。

我已经将typeahead-editable设置为false，所以我想是否可以在用户离开字段或触发select操作时看到选择是否为空，但是我不能让它们触发我在指令的控制器中创建的提供的事件。（在示例中，“ clearNoMatch”方法不会在ng-blur或selectahead-on-select上触发，或者不会运行clearNoMatch方法。

模板和指令如下所示：

模板：

 var dropdown_template = `
<script type="text/ng-template" id="customTemplate.html">
    <a>
        <div ng-controller="dropDownCtrl">

            <span>{{spacex(match.model.depth)}}</span>
            <span ng-bind-html="match.label | uibTypeaheadHighlight:query">
           </span>

        </div>
    </a>
</script>

<div class='container-fluid typeahead-dropdown'>
    <input type="text" ng-model="dropdownSelect" placeholder="Press spacebar for list" 
           uib-typeahead="item as item.name for item in dropitems | filter:{name:$viewValue}"
           typeahead-template-url="customTemplate.html"
           class="form-control"
           typeahead-show-hint="true"
           typeahead-min-length="0"
           ng-model-options="{debounce: 200, getterSetter: true}"
           typeahead-editable="false"
           typeahead-on-select="clearNoMatch()"
           ng-blur="clearNoMatch()"
    >
</div>
`;

app.directive("dropdownlist", function () {
        return {
            link: function (scope, element, attrs) {
            },
            template: dropdown_template,
            scope: {
                dropitems: "=list",
                dropdownSelect: "=select",
            }
        }
    }).controller("dropDownCtrl", function ($scope) {
    $scope.spacex = function (n) {
        var retval = "";
        var sp = '\xa0\xa0';

        for (i = 0; i < n; i++) {
            retval += sp;
        }
        return retval;
    };
    $scope.show = function (obj) {
        console.log("show output");
        console.log(JSON.stringify(obj));
    };

    $scope.clearNoMatch = function() {
        console.log("no match!")       <---Won't trigger.
    }
});

无法在AngularJs中将uib-typeahead触发ng-blur

0 个答案: