search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.27k stars 6.73k forks source link

bug(): alert and tab directives conflict with ngIf on angular#1.2.0-rc.3 #1174

Closed nl0 closed 11 years ago

nl0 commented 11 years ago

Directives that use transclusion (tested on tab and alert) in conjunction with ngIf are broken on angular#1.2.0-rc.3 (though worked well on rc.2).

For example <alert type="alert.type" ng-if="alert.text">{{alert.text}}</alert> fails with the following error:

Error: [$compile:multidir] Multiple directives [ngIf, alert] asking for transclusion on: <alert type="alert.type" ng-if="alert.text">
http://errors.angularjs.org/1.2.0-rc.3/$compile/multidir?p0=ngIf&p1=alert&p2=transclusion&p3=%3Calert%20type%3D%22alert.type%22%20ng-if%3D%22alert.text%22%3E
minErr/<@http://seed5.localnet:3002/components/angular/angular.js:78
assertNoDuplicate@http://seed5.localnet:3002/components/angular/angular.js:5624
applyDirectivesToNode@http://seed5.localnet:3002/components/angular/angular.js:5142
compileNodes@http://seed5.localnet:3002/components/angular/angular.js:4859
compile@http://seed5.localnet:3002/components/angular/angular.js:4801
applyDirectivesToNode@http://seed5.localnet:3002/components/angular/angular.js:5158
compileNodes@http://seed5.localnet:3002/components/angular/angular.js:4859
compileNodes@http://seed5.localnet:3002/components/angular/angular.js:4865
compileNodes@http://seed5.localnet:3002/components/angular/angular.js:4865
compile@http://seed5.localnet:3002/components/angular/angular.js:4801
bootstrap/doBootstrap/</<@http://seed5.localnet:3002/components/angular/angular.js:1188
Scope.prototype.$eval@http://seed5.localnet:3002/components/angular/angular.js:10699
Scope.prototype.$apply@http://seed5.localnet:3002/components/angular/angular.js:10796
bootstrap/doBootstrap/<@http://seed5.localnet:3002/components/angular/angular.js:1186
invoke@http://seed5.localnet:3002/components/angular/angular.js:3368
bootstrap/doBootstrap@http://seed5.localnet:3002/components/angular/angular.js:1185
bootstrap@http://seed5.localnet:3002/components/angular/angular.js:1199
angularInit@http://seed5.localnet:3002/components/angular/angular.js:1148
@http://seed5.localnet:3002/components/angular/angular.js:19137
b.Callbacks/c@http://seed5.localnet:3002/components/jquery/jquery.min.js:3
b.Callbacks/p.fireWith@http://seed5.localnet:3002/components/jquery/jquery.min.js:3
.ready@http://seed5.localnet:3002/components/jquery/jquery.min.js:3
H@http://seed5.localnet:3002/components/jquery/jquery.min.js:3

(using angular-bootstrap#0.6.0)

mvhecke commented 11 years ago

I'm just guessing here, but maybe this is caused by the order in which directives are handled because the priority of them changed? https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes

pkozlowski-opensource commented 11 years ago

@nl0 you are seeing side effects of https://github.com/angular/angular.js/commit/63c5334c84b7269428c710226764d1f08a36e0d4

This is not something we can remedy in this project, the final fix needs to come from the AngularJS itself.

What you can do on your side is to move ngIf into a wrapper div. But I'm not sure what is the advantage of doing alerts filtering on the DOM level via ngIf. Couldn't you do this on the data level and filter out alerts with empty messages?

Closing for now as this is something that needs to be fixed in the AngularJS.

nl0 commented 11 years ago

@pkozlowski-opensource ok, alerts may be not a perfect example, but tabs are, imo. If i have a <tabset> with <tab>s inside, and i want to show only some of them based on some condition -- the wrapper divs are not an option, the only option is to use ngShow instead of ngIf, but ngIf makes more sense in this case (to take these unneeded tabs out of the dom altogether). I understand that the fix should come from the angular itself, but maybe you could direct me to some workaround?

ganarajpr commented 11 years ago

Currently the only workaround is 1.2.0rc2. It works on rc2.

nl0 commented 11 years ago

but datepicker doesnt work on rc2 =)

ganarajpr commented 11 years ago

aha, works for me actually. But I guess I have done some significant changes to it on my end.

pkozlowski-opensource commented 11 years ago

@nl0 unfortunatelly this is not something we can remedy in this project. If 2 directives are asking for transclusion on the same DOM element, AngularJS1.2RC3 will fail with the error. As commented by Igor this is something that needs to be solved in the AngularJS itself.

For now your only option is to move ngIf into a parent element of a directive.

nl0 commented 11 years ago

ok thx