Question

Angular-ui bootstrap提供了typeahead功能，其中一个指令是typeahead-on-select，它将回调函数作为参数，例如： typeahead-on-select="onSelectItem($item, $model, $label)"。是否有可能在我自己的自定义指令（非控制器）中截取或监听此typeahead-on-select？

示例：https://jsfiddle.net/mutesvhp/

我想在用户从下拉列表中选择内容时添加大量自定义验证，并且我不想根据不同的方案使用此代码的许多实例污染我的控制器：$scope.myCustomForm.myCustomInput.$setValidity("somethingCustom", false);。我宁愿在验证指令中使用它。

Answer 1

请查看演示：JSFiddle。选择first将使验证未通过。

我倾向于使用隔离范围进行双向绑定，如：

myApp.directive('myDir', function() {
    return {
        scope: {
            ngModel: '=',
            hasError: '='
        },
        controller: ['$scope', function ($scope) {
            $scope.$watch('ngModel', function (model) {
                console.log('Selected: ' + model);
                if (model === 'first') {
                    $scope.hasError = true;
                }
            });
        }]
    }
});

HTML：

<input data-ng-model="myModel" 
       typeahead="item for item in items"
       typeahead-on-select="onSelectItem($item, $model, $label)"
       ng-class="{error: hasError}"
       data-has-error="hasError"
       my-dir>

Angularjs在custom指令中监听属性的回调函数

1 个答案: