When using Angular typeahead directive, console displays error "Template for directive 'uibTypeaheadPopup' must have exactly one root element."

Question

It seems like there are a lot of related questions - however, I've tried everyone of the solutions to no avail.

Let me start by discussing the problem and what I've tried:

I literally copied and pasted the sample from the official angular bootstrap website

HTML

Controller

$scope.states = [...]; // omitted for brevity

And I got the following error:

Error: [$compile:tplrt] Template for directive 'uibTypeaheadPopup' must have exactly one root element. uib/template/typeahead/typeahead-popup.html

I'm not sure if it's relevant, but these are the versions of the relevant libraries involved: - Bootstrap CSS 3.3.7 - jQuery 3.1.1 - Bootstrap.js 3.3.7 - Angular 1.5.7 (I'm using Angular 1 here) - Angular Bootstrap 2.2.0

What I tried:

Attempt 1: Wrapping it in div tags because it would then have "one root element".

Attempt 2: Wrapping the template (typeahead-popup.html) in div tags in the ui-bootstrap-tpls.js angular bootstrap template file.

Attempt 3: I tried removing all the ' ' from the template file because I stumbled upon a site that suggested this as a workaround. The template looks a bit like this in the source file and I got rid of all of the s:

angular.module("uib/template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("uib/template/typeahead/typeahead-popup.html",
"**
**" +
"    **
**" +
"        **
**" +
"    **
**" +
"**
**" +
"");
}]);

Attempt 4: I then thought about my templating system, and thought I might have had tags that weren't properly closed. A preliminary inspection came up with an additional tag on top of an tag, which I removed, but to no avail. I didn't see any further tags that were not properly closed.

Attempt 5: I thought this might have something to do with the fact that I'm using node.js to run the project, so instead of running localhost, I replaced all my javascript libraries from relative paths to CDNs, and my project files with absolute paths and opened it directly in the browser, but I had problems with cross-origin in Chrome and Firefox.

My section looks something like this.

Attempt 6: Removing comments, as per Angular's official documentation. I tried removing all the comments in the related file (I'm using ui-router for routing, so for my project, it's the home page, and the immediate template for a child state nested one level down). However, It didn't seem to do the trick.

Attempt 7: I tried replicating the project and stripping down to its bare essentials so I'd only have one html (or ejs as the templating system I'm using) page and one javascript file for the project but the same error showed (...must have exactly one root element).

HTML



... // references included under "Attempt 5"

JS

angular.module("ctl",
    [
        'ui.bootstrap'
    ])
    .controller("AppCtrl", AppCtrl);

AppCtrl.$inject = ["$scope", "$log"];

function AppCtrl($scope, $log) {
    $scope.states = [...]; // omitted for brevity
}

I feel like I'm missing something obvious but I can't figure out what it is...would appreciate some help.

When using Angular typeahead directive, console displays error "Template for directive 'uibTypeaheadPopup' must have exactly one root element."

Answers (1)

Related Questions

When using Angular typeahead directive, console displays error &quot;Template for directive &#39;uibTypeaheadPopup&#39; must have exactly one root element.&quot;

Answers (1)

Related Questions

When using Angular typeahead directive, console displays error "Template for directive 'uibTypeaheadPopup' must have exactly one root element."