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

【问题标题】：Error trying to add AngularJS Bootstrap Typeahead into custom directive尝试将 AngularJS Bootstrap Typeahead 添加到自定义指令时出错
【发布时间】：2014-09-11 00:10:26
【问题描述】：

我正在尝试在我自己的一个自定义指令中使用 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 并尝试使用他们的解决方案（删除替换：真）但这没有帮助，我也不希望它是替换：假。

【问题讨论】：

标签： angularjs

【解决方案1】：

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

【讨论】：