Dynamic list of tabsets in 0.5.0

[davidmdem]

Repeating a dynamic list of tabsets breaks in 0.5.0 while working as expected in 0.4.0.

0.4.0 - Working:
http://plnkr.co/edit/tPVbfa9lI1CarrDS171p?p=preview

0.5.0 - "Cannot read property '$parent' of undefined"
http://plnkr.co/edit/er6lg52FYHn4AyRF5kSm?p=preview

[dtelaroli]

a error happens if add active property on the tab to:

http://plnkr.co/edit/kAc1C6?p=preview

TypeError: undefined is not a function
    at Object.fn (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap-tpls.min.js:1:31943)
    at Object.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:8811:27)
    at Object.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:9012:24)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:1004:15
    at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:2925:25)
    at resumeBootstrapInternal (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:1002:14)
    at bootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:1017:12)
    at angularInit (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:977:5)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:16872:5
    at HTMLDocument.trigger (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js:1812:7) 

[hallister]

Appears to a be an issue with https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L307:

tabsetCtrl.$transcludeFn(tabsetCtrl.$scope.$parent, function(node) {.

The problem appears to be that tabsetCtrl.$scope is set in the compile phase of tabset. Which means, tabsets can no longer be generated dynamically (because the compile phase happens once). Is this intended to be a supported feature @ajoslin?

EDIT: The above is based on the assumption that ng-repeat doesn't recompile every time it watches an object for changes. If ng-repeat is simpy cloning and adding an index hash to each object iteration, then it won't recompile, which means the tabset compile stage gets skipped.

[ajoslin]

Ergh, sorry. I should have looked at tabsetTitles better bfeore merging it, it kind of was rushed in.

[ajoslin]

Hmm.. that is in the linking function. I don't think that line specifically is the problem. Looking into this now

[ajoslin]

@dtelaroli your error is happening because '!active' is not an assignable expression. When we upgrade to angular 1.2 we will get better errors for that.

[ajoslin]

http://plnkr.co/edit/lw1PS6rpe7xXNfZXN3xR?p=preview

With the ng-repeat, the tabset-titles is compiled before the tabset for some reason.

I added a setTimeout and it works - check line 2676 of ui-bootstrap.js on the plunker.

To actually fix it, I will have to try a few more things .. another day

[dtelaroli]

thanks @ajoslin

[karol-f]

thanks @ajoslin for the temporary solution. I really appreciatee it!

[npgauth]

Yes - thank you for the temporary solution.. However, the solution results in the tabs being underneath the content (your plnkr example shows the problem). Any update on the fix or is there another fix to get the tabs above the content? Thanks!

[lefnire]

I've experienced this same error with non-dynamic nested tabs as well, reverting to 0.4.0 fixes. Plunkr.
Edit: woops! Dupe of #856

[ghost]

here is a small css hack to use with this one : #783 (comment)

it's putting back the tabs above the content.

.tabbable {
    position: relative;
    padding-top: 40px; /* height of the tabs */
}

.tabbable .nav-tabs {
    position: absolute;
    top: 0;
}

[derekrprice]

Could this be related to angular/angular.js#2064?

[amfern]

same problem here, but it worked great in development untill i did precompile on production and saw this error

[abottoni]

Hi @ajoslin Have you think about a definitive solution of this matter? I have tried your solution but the tabs now are underneath the content and even if i tried the @desgnl css hack, it is not working for me anymore.. I would like to have again the version 0.4.0 but unfortunately that version does not fit anymore in other requirements in my project.

[pkozlowski-opensource]

@ajoslin do you have a reference to a bug in AngularJS that might be the root cause of this one? If so I could try to "lobby" for its faster resolution. I'm looking at the issue right now but I'm totally puzzled by what is going on, as I fail to understand why the linking function of the nested tabset is not executed....

[ajoslin]

It is because templateUrl directives are evaluated asynchronously and in a different order, so a timeout fixes the asynchronous problem of directives not loading in time. I can find the issue later, it is the one where vojta posted a PR for $compile recently ... It may be merged already. 

—
Sent from Mailbox for iPhone

On Tue, Oct 1, 2013 at 9:54 AM, Pawel Kozlowski notifications@github.com
wrote:

@ajoslin do you have a reference to a bug in AngularJS that might be the root cause of this one? If so I could try to "lobby" for its faster resolution. I'm looking at the issue right now but I'm totally puzzled by what is going on, as I fail to understand why the linking function of the nested tabset is not executed....

Reply to this email directly or view it on GitHub:
#783 (comment)

[mboudreau]

What's the solution for this? We need tabs in our application and this is really throwing a wrench in the gears.

[lefnire]

we're just using bootstrap proper for things that don't work in ui-bootstrap, like this issue. mix-n-match

[mboudreau]

The problem here is that our app is fully angular and we don't want to use
jquery on top of it all. Plus, this isn't a solution or an excuse as to
why it doesn't work.

On Mon, Oct 7, 2013 at 10:58 AM, Tyler Renelle notifications@gh.neting.ccwrote:

we're just using bootstrap proper for things that don't work in
ui-bootstrap, like this issue. mix-n-match

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/783#issuecomment-25779862
.

"If at first you don't succeed, use a bigger hammer." - Unofficial motto of
the Royal Electrical and Mechanical Engineers

[ajoslin]

It looks like it will be fixed in 1.2.0: angular/angular.js#3927

[mboudreau]

Yeah, I just saw this and trying to build it for general use.
On Oct 7, 2013 1:55 PM, "Andy Joslin" notifications@github.com wrote:

It looks like it will be fixed in 1.2.0: angular/angular.js#3927angular/angular.js#3927

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/783#issuecomment-25782919
.

[mboudreau]

Okay, seems to have resolved the error, but my tabs are still not showing
up. Investigating further, but for those looking to use the latest angular
(as of 15 minutes ago), you can find it here:
https://github.com/mboudreau/bower-angular

To use with your bower.json, include this:

"devDependencies": {
"angular": "
https://github.com/mboudreau/bower-angular/archive/master.zip"
},
"resolutions": {
"angular": "*"
}

On Mon, Oct 7, 2013 at 1:56 PM, Michel Boudreau michelboudreau@gmail.comwrote:

Yeah, I just saw this and trying to build it for general use.
On Oct 7, 2013 1:55 PM, "Andy Joslin" notifications@github.com wrote:

It looks like it will be fixed in 1.2.0: angular/angular.js#3927angular/angular.js#3927

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/783#issuecomment-25782919
.

"If at first you don't succeed, use a bigger hammer." - Unofficial motto of
the Royal Electrical and Mechanical Engineers

[billkeller]

Using AngularJS v1.2.0-rc.3 with angular-ui v0.6.0 doesn't resolve the issue of embedded tabs, so I'm assuming #1072 , #1043 , #990 , #1002 are not actually duplicates of this one.

[daa]

I had similar issue using tabs inside of ng-if directive - tabsetTitles postlink function ran before tabset link function, so i moved tabset link to pre-link and with angular-1.2.0-rc.3 it worked.

plunker with problem:
http://plnkr.co/edit/MoRweJ?p=preview

plunker with fix:
http://plnkr.co/edit/D3n45R?p=preview

[billkeller]

I'll mention that @daa's update resolves embedded tabs as well: http://plnkr.co/edit/sziarc?p=preview