Question

我正在尝试在我自己的一个自定义指令中使用AngularJS UI Bootstrap Typeahead指令，但无论我做什么，我都会遇到同样的错误：

Error: [$compile:multidir] Multiple directives [match, typeaheadMatch] asking for new/isolated scope on: <div typeahead-match="" index="$index" match="match" query="query" template-url="templateUrl">

对于如何/何时在指令中使用范围（我们是否应该使用隔离范围或继承范围），我仍然不是100％感到满意，所以我不知道该怎么做。这就是我的指令现在的样子。

app.directive('skMagicInput', function ($timeout) {

    return {
        restrict: 'A',
        replace: true,
        require: 'ngModel',
        template: '<div class="sk-magic-input">\
                  <input type="text" ng-model="thisModel" ng-show="isEditable" ng-blur="toggleEdit(true)" typeahead="item for item in items"  />\
                  <span class="sk-magic-value" ng-show="!isEditable && !isConnecting" ng-click="toggleEdit()">{{ thisModel }}</span>\
                  <img src="images/interstitial/connect-animate.gif" class="iConnect" ng-show="isConnecting" />\
              </div>',

        link: function (scope, elem, attr) {
            scope.isEditable = false;



            var failed = false;

            scope.toggleEdit = function (shouldUpdate) {

                scope.isEditable = !scope.isEditable;



                if (scope.isEditable) {
                    elem.find('input').css('width', elem.find('.sk-magic-value').width());
                }

                if (shouldUpdate) {

                    // Run API
                    scope.isComplete = false;
                    scope.isConnecting = true;
                    $timeout(function () {
                        scope.isConnecting = false;
                        scope.isComplete = true;
                        if (failed) {
                            scope.isValid = false;
                        } else {
                            scope.isValid = true;
                        }
                    }, 2000);
                }

            }


            scope.$watch(attr.skTypeahead, function (val) {
                scope.items = val;
            });

            scope.$watch(attr.ngModel, function (val) {
                scope.thisModel = val;
            });
        }
    }
});

这就是我的指令在HTML模板中的样子

<input sk-magic-input ng-model="mailbox.SourceAccount.AccountDisplayName" sk-typeahead="model.AllSourceMailboxes" />

我想将实际的<input>值绑定到ngModel中的变量，并且我希望typeahead源列表是skTypeahead属性中给出的列表。执行此操作的正确方法是什么，不会导致此错误？

我找到another SO question并试图使用他们的解决方案（删除替换：true）但这没有帮助，我也不想让它替换：false反正。

Answer 1

啊，我意识到了这个问题...... Angular UI Bootstrap Typeahead使用了一个“match”指令，并且我已经在我的应用程序中声明了我自己的“match”指令，因此试图访问我创建的指令时发生冲突而不是他们创造的那个。我所做的就是将我的“匹配”指令更改为“sk-match”，现在它可以正常工作。

尝试将AngularJS Bootstrap Typeahead添加到自定义指令时出错

1 个答案: