Issue: [$compile:multidir] encountered when attempting to implement uib-tab

Here's the code snippet I was using:

<uib-tabset>
  <uib-tab  id="tab1" heading="Tab1">
    <div ng-include="'partials/tab1.html'"></div>
  </uib-tab>
    <uib-tab  id="tab2" heading="Tab2" ng-controller="Tab2Controller">
    <div ng-include="'partials/tab2.html'"></div>
  </uib-tab>
    <uib-tab  id="tab3" heading="Tab3" ng-controller="Tab3Controller">
    <div ng-include="'partials/tab3.html'"></div>
  </uib-tab>
</uib-tabset>

Initially, this code worked perfectly. But after updating AngularJS and AngularUI Bootstrap, I started getting:

Error: [$compile:multidir]

This error occurred because each tab had its own controller (specifically Tab2 and Tab3 in my case).

Answer №1

If you're looking for a potential solution, one approach could be to assign the controller to the inner div instead of the ui-tab element:

<uib-tabset>
  <uib-tab  id="tab1" heading="Tab1">
    <div ng-include="'partials/tab1.html'"></div>
  </uib-tab>
  <uib-tab  id="tab2" heading="Tab2">
    <div ng-include="'partials/tab2.html'" ng-controller="Tab2Controller"></div>
  </uib-tab>
  <uib-tab  id="tab3" heading="Tab3">
    <div ng-include="'partials/tab3.html'" ng-controller="Tab3Controller"></div>
  </uib-tab>
</uib-tabset>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching for complete words in JavaScript within an array

I've been searching everywhere for a solution to this problem but I'm stuck... here's the situation: var strArray = ['Email Address']; function findExactMatchInArray(str, strArray) { for (var j = 0; j < strArray.length; ...

Yeoman refuses to generate a backbone application scaffold

When I try to use yeoman and generator-backbone to scaffold a backbone app, I encounter some issues. Every time I run yo backbone, I receive the following messages: After completion, it tries to run bower install for you in order to install necessary depe ...

What is the best way to ensure that only one accordion tab remains open at a time, preventing it from closing unless a different tab

How can I ensure that only one accordion tab is open at a time, automatically closing any others that are currently open? Here is my current code for the accordion: $('[data-bs-toggle="collapse"]').on('click', function(e) { if ($( ...

Implementing `block eval() in Content Security Policy header for an Angular 8 project

Is it possible to disable the eval function in CSP-Header for an Angular project, even if it's not being used directly? Are there any potential negative consequences or errors that could occur when deploying the project? Appreciate your insight. ...

Passing a PHP variable to a JavaScript function in Laravel results in the key being displayed instead of the value

I am currently passing the ID of a Laravel object through a href click to a JavaScript function. <a onclick="getDetails('{{$details->id}}')"</a> This method works partially, as my console.log displays the correct ID 28. However, whe ...

Tips for eliminating unnecessary data in written content

Could anyone provide a recommended method for removing unnecessary symbols from text strings? For instance, transforming "CWC%20-%20Maint%20Eng%20-%20El" into the more readable format of "CWC - Maint Eng - El". ...

Ways to efficiently verify if a URL is valid by checking if it loads a page with content

INQUIRY: How can I verify if a URL is valid and loads a webpage successfully? Currently, my code only checks the status code, which means that a URL like will be considered valid even though it does not load any content. Is there a way to ensure that t ...

Choose an XPath formula that will target every single element, text node, and comment node in the original sequence

How can we write an XPath expression that selects all elements, text nodes, and comment nodes in the order they appear in the document? The code below selects all elements but not text nodes and comment nodes: let result = document.evaluate('//*&apo ...

The error I encountered with the Typescript React <Select> onChange handler type was quite

Having an issue while trying to attach an onChange event handler to a Select component from material-ui: <Select labelId="demo-simple-select-label" id="demo-simple-select" value={values.country} onChange={handleCountryChange} ...

Can anyone provide guidance on how to properly pass the database variable globally in express.js?

Despite attempting numerous tutorials, I am still unable to grasp the concept. My project involves MongoDB and Express.js and is structured in the server.js file. const express = require('express'); const subdomain = require('express-subdom ...

Guidelines for establishing authentic headers on a SignalR connection

Can headers be set on the SignalR connection directly? I am aware of setting query string parameters but it is not secure enough for my specific scenario. var conn = ($ as any).hubConnection(); conn.url = URL; conn.qs = { "token": SECRET_KEY }; conn ...

Audio transition on hover over image

I'm currently designing a website and I have an image depicting a house with windows. I would like to create an interactive element where the face of Goldilocks pops up in one of the windows on mouseover, accompanied by sound. I envision the face movi ...

Combining keys from an array of objects into a single array categorized by key names

When working with an array of objects, I need to filter and extract all the keys. One challenge I face is when there are nested objects, I want to concatenate the key names to represent the nested structure. For example: const data = [ id: 5, name: "S ...

Transform this color matching game into an image matching game using JavaScript and jQuery

I have a color matching game that I would like to enhance by matching background-images instead of just background-colors. However, I am facing difficulties in making this change. For instance, instead of matching the color red with the text "red," I wan ...

Display Issues with Angular Material Dropdown in Internet Explorer 11

How can I fix the display of Angular Material Dropdown in IE11 to match other browsers? Expectation: https://i.sstatic.net/IksBR.png Reality in IE11:https://i.sstatic.net/uhHXG.png Website information: [example no longer available. AngularJS was replace ...

Obtain the contents of the table row td element within the specified div class without relying on

I am currently working with a basic table layout, shown below: <table> <tbody> <tr> <td>img</td> <td class="mediaTitle"><span class="media_title">Media Name Title</span>< ...

Oops! An error occurred while trying to find the _mongodb._tcp.blog-cluster-0hb5z.mongodb.net. Please check your query settings and try again

My free Mongo Atlas cluster suddenly stopped connecting, even though everything was working fine before. Strangely, I can see that data has been collected on the MongoDB website. It's puzzling why this issue occurred and now my entire site won't ...

Utilizing Inquiries within Arrays

I've been working on a quiz application and I have successfully built the array with questions and answers. However, I'm facing some challenges in getting the next question to display after clicking the submit button. Here is a snippet of the cod ...

Get rid of the unnecessary vertical line that is located at the end of the string

I have come across a situation similar to the one demonstrated in this code snippet: http://plnkr.co/edit/eBjenGqgo3nbnmQ7XxF1?p=preview Currently, I am working with AngularJS 1.5.7. The directives used in my input - ( first ) textarea are the same as tho ...

Fetching data using ng-model along with appending in Javascript

When I press the add button in my form, I want to extract the value from the input field named Name using ng-model. Additionally, I am utilizing the append function in my form to insert the next column. Unfortunately, I have encountered difficulties in imp ...