Angular JS- ui.bootstrap.collapse not working properly

Question

I am using Angular-ui Bootstrap for my application. I am trying to use the collapse property of angular-ui bootstrap.

I am doing the same as shown in the example on this site in the collapse part. But i am not getting what is wrong i am doing in my code that this is not working properly.

This is the snippet from my code

<h1>Your Connections</h1><a href="" ng-click="isCollapsed = !isCollapsed" class="button-link">Invite your friend to join you</a>
            <div collapse="isCollapsed">
                <button style="float:right; margin-right: 4px; margin-top: 5px; background-color: #8AA8BD; height: 30px" ng-click="sendInvite()">Send</button>
                <input type="text" class="well well-sm" style="float: right">
            </div>

While running this code it is giving the following error

TypeError: Cannot read property 'then' of undefined
at e (ui-bootstrap-tpls-0.13.0.min.js:8)
at Object.fn (ui-bootstrap-tpls-0.13.0.min.js:8)
at Object.$get.Scope.$digest (angular.js:9831)
at Object.$get.Scope.$apply (angular.js:10039)
at angular.js:1127
at Object.invoke (angular.js:3123)
at doBootstrap (angular.js:1125)
at bootstrap (angular.js:1140)
at angularInit (angular.js:1091)
at angular.js:17898(anonymous function) @ angular.js:7818$get @ angular.js:5601$get.Scope.$digest @ angular.js:9843$get.Scope.$apply @ angular.js:10039(anonymous function) @ angular.js:1127invoke @ angular.js:3123doBootstrap @ angular.js:1125bootstrap @ angular.js:1140angularInit @ angular.js:1091(anonymous function) @ angular.js:17898trigger @ angular.js:1990(anonymous function) @ angular.js:2246forEach @ angular.js:196eventHandler @ angular.js:2245

as well as the follwing error

TypeError: fn is not a function
at angular.js:11316
at completeOutstandingRequest (angular.js:3457)
at angular.js:3751

Please help me get the wrong i am doing in the code. Any help will be appreciated.... Thanks.

The problem may be outside of the code snippet you are showing. Do you have your module and controller setup properly and ng-app and ng-controller set in the html? Also do you use the isCollapsed variable anywhere else and are you initializing it in your controller? It is working in this plunker plnkr.co/edit/6iNCnnZPXp1OpBsitmig — Doug E Fresh
– Doug E Fresh, Commented Jul 23, 2015 at 14:00
Thanks for your reply @Sapy. I have done exactly the same as is given in the plunker. Also i have i have set up my ng-app and ng-controller properly in my html. But i am not getting what is wrong in the code. — Kartik Arora
– Kartik Arora, Commented Jul 23, 2015 at 14:17
Well using a link href="" may be causing a page reload every time you click it. Try using a button <button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed"> CLICK HERE </button> Also do you have a bunch of other code in your project? The error may be generated someplace else. — Doug E Fresh
– Doug E Fresh, Commented Jul 23, 2015 at 14:23

Kartik Arora · Accepted Answer · 2015-07-29 08:37:24Z

1

I got the solution to my question. The problem was that i was using an older version of Angular JS(version 1.2.X). The UI bootstrap does not support this version. As soon as i updated my project with the latest version of Angular JS(version 1.4.3) the code start to work for me.

NOTE:- Requires version 1.3.X at least to make Angular UI-Bootstrap work for your code.

answered Jul 29, 2015 at 8:37

Kartik Arora

318 bronze badges

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

Collectives™ on Stack Overflow

Angular JS- ui.bootstrap.collapse not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related