Angularjs ui bootstrap is-open not working for drop down

Question

Ok so here is my code of the controller:

$scope.isopen = false;

Here is my template file (its in Jade)

div(ng-click="isopen = !isopen") {{ isopen }}

div.dropdown(is-open="isopen")
    div.dropdown-toggle Click me
    ul.dropdown-menu
        li Asdf

So when I click on the div that initially says false, the drop down menu is just unaffected. Why? This is very frustrating.

The drop down menu works fine when I click on "Click me" itself, but I want to toggle it by using is-open.

Thanks in advance.

suggest you create a demo in plunker that replicates problem — charlietfl
– charlietfl, Commented Jun 13, 2014 at 2:46

XrXr · Accepted Answer · 2014-06-13 03:13:17Z

1

You might be running into scope inheritance problem. Try putting isopen into an object in the scope and accessing that way.

$scope.store = {};
$scope.store.isopen = false;


div.dropdown(is-open="store.isopen")
    div.dropdown-toggle Click me
    ul.dropdown-menu
        li Asdf

answered Jun 13, 2014 at 3:13

XrXr

2,0671 gold badge14 silver badges22 bronze badges

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

2 Comments

XrXr Over a year ago

Can you make a live demo using Plunker? It will really help people to fix the issue. Are you changing the right variable in the div? div(ng-click="store.isopen = !store.isopen")

Parin Over a year ago

Never mind, had the old version of angular bootstrap. Thanks anyway.

Collectives™ on Stack Overflow

Angularjs ui bootstrap is-open not working for drop down

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related