Keep track of bootstrap's component state in Angularjs - angularjs

Question

I'm learning Angular JS.
I have my angularjs component whose HTML template consists of Bootstrap's Dropdown component plus a message <div>:
<div class="dropdown-container">
<div id="messageDiv"></div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
This is straight from Bootstrap: http://getbootstrap.com/components/#dropdowns
I would like my #messageDiv to have text "Dropdown is open" when the dropdown is open and "Dropdown is closed" when dropdown is closed. How can I achieve this "the Angular way"?

Answer 1

I strongly recommend you to not reinvent the wheel and use the Angular UI Bootstrap.There you can find the dropdown directive. Then u can manage state of the dropdown directive using isOpen property binding and show/hide #messageDiv based on that property.

Answer 2

You can track if the dropdown opens and closes with events. Bootstrap provides a javascript file that you need to include and it also requires jquery. I made a working Plunker here: https://plnkr.co/edit/pE7bMI?p=preview
Once you include jquery, and bootstrap's js file you can track the events like this:
$scope.dropdownOpen = false;
// get a reference to your dropdown parent (in your case the <div class="dropdown>" line)
var dropdown = angular.element('#myDropdown');
dropdown.on('show.bs.dropdown', function(event) {
$scope.dropdownOpen = true;
$scope.$evalAsync();
});
dropdown.on('hide.bs.dropdown', function(event) {
$scope.dropdownOpen = false;
$scope.$evalAsync();
});
Why is $scope.evalAsync() in there?
Since angular.element is an alias for jqlite or jquery we are actually binding outside of angular. It doesn't know about the change so we need to tell the scope that something has changed.