Question

我制作了使用Angular UI typeahead指令的自定义指令，但没有按预期工作。在我的指令模型中没有更新select。有人帮忙吗？为了测试我使用静态数组而不是http服务。 Plunker HERE。

.directive('httpDictionary', ['$compile', function($compile){
    return {
        scope: {
        },
        restrict: 'A',
        controllerAs: "dm",
        controller: ['$scope', '$http', 'ARRAY', function($scope, $http, ARRAY){
           var dm = this;
           dm.dict = function(val){
            return ARRAY; // for testing only
            // return $http.get($scope.dictionaryUrl, { ...
           } 
        }],
        link: function(scope, element, attributes, ngModel) {
            scope.dictionaryUrl = attributes.httpDictionary;
            element.removeAttr('http-dictionary'); // avoid loop
            element.attr('uib-typeahead', 'd for d in dm.dict($viewValue)');
            $compile(element)(scope);
        }
    };    
}])

Answer 1

为了帮助绑定模型，我通常使用uib-typeahead设置typeahead-on-select。这样，您可以在设置新模型时检查或执行一些其他代码。

我找到了here找到的代码，但做了一些小调整：

我将输入文本字段隔离到自己的视图中，以便将功能与父视图分开。
我将test模型传递给指令的范围属性，然后将其绑定到指令控制器（使用bindToController属性），这样如果您需要{{1将来可以与父控制器通信的模型，你可以这样做。

希望这会有所帮助。

Answer 2

我的作品如下所示。 Plunker代码here。我在指令范围内绑定了ngModel并使用了typeahead-on-select回调函数。我不认为这是优雅的，但有效。我一直在考虑使用$watch，但没有成功。如果你有更好的灵魂，我会很高兴。

.directive('httpDictionary', ['$compile', function($compile){
    return {
        scope: {
          ngModel: '='
        },
        restrict: 'A',
        controllerAs: "dm",
        controller: ['$scope', '$http', 'ARRAY', function($scope, $http, ARRAY){
           var dm = this;
           dm.dict = function(val){
            return ARRAY; // for testing only
            // return $http.get($scope.dictionaryUrl, { ...
           } 
           dm.select = function($model) {
              $scope.ngModel = $model;
           }           
        }],
        link: function(scope, element, attributes, ngModel) {
            scope.dictionaryUrl = attributes.httpDictionary;
            element.removeAttr('http-dictionary'); // avoid loop
            element.attr('uib-typeahead', 'd for d in dm.dict($viewValue)');
            element.attr('typeahead-on-select','dm.select($model)');
            element = $compile(element)(scope);
        }
    };    
}])

Angular UI Typeahead自定义指令 - 模型未在select上更新

2 个答案: