Error trying to add AngularJS Bootstrap Typeahead into custom directive

Question

I am trying to use the AngularJS UI Bootstrap Typeahead directive inside of one of my own custom directives, but no matter what I do I keep getting the same error:

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">

I am still not 100% comfortable with how/when to use scopes within a directive (whether we should use Isolate scope or inherited scope), so I am not sure what to do here. This is what my directive looks like now.

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;
            });
        }
    }
});

And this is what my directive looks like in the HTML template

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

I want the actual <input> value to be bound to the variable in ngModel, and I want the typeahead source list to be the list that is given in the skTypeahead attribute. What is the correct way to do this that does not result in this error?

I found another SO question and tried using their solution (removing the replace: true) but that did not help, nor do I want to have it be replace:false anyways.

Matt Hintzke · Accepted Answer · 2014-09-11 00:32:26Z

2

Ah, I realized the problem... Angular UI Bootstrap Typeahead uses a "match" directive, and I had my own "match" directive already declared in my application, so it was have conflicts trying to access the one I created instead of the one that they created. All I did was change my "match" directive to be called "sk-match" and now it works.

answered Sep 11, 2014 at 0:32

Matt Hintzke

8,03216 gold badges62 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error trying to add AngularJS Bootstrap Typeahead into custom directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related