javascript - Angular Bootstrap dropdown toggle not working -
i have angular bootstrap dropdown menu doesn't seem toggling dropdown. on click, nothing shows up, although can see list items on inspect element.
html:
<div ng-controller="dropdownctrl"> <!-- simple dropdown --> <span class="dropdown" dropdown on-toggle="toggled(open)"> <a href class="dropdown-toggle {{ disabledropdown }}" dropdown-toggle> <i class="fa fa-align-justify"></i> </a> <ul class="dropdown-menu port-dropdown-menu"> <li>test</li> <li>test2</li> <li ng-repeat="choice in dropdown.items"> <a ui-sref="portfolio.port({portid: choice.id})">{{ choice.title }}</a> </li> </ul> </span> </div>
dropdownctrl:
'use strict'; angular.module('portfoliomanager').controller('dropdownctrl', function ($scope, portfoliocreateservice) { $scope.dropdown = {}; $scope.dropdown.items = portfoliocreateservice.getdropdowntabs(); $scope.disabledropdown = portfoliocreateservice.getdropdownclass(); $scope.$on('dropdownstatus', function(){ $scope.disabledropdown = portfoliocreateservice.getdropdownclass(); console.log($scope.dropdown.items); }); $scope.status = { isopen: false }; $scope.toggled = function(open) { $log.log('dropdown now: ', open); }; $scope.toggledropdown = function($event) { $event.preventdefault(); $event.stoppropagation(); $scope.status.isopen = !$scope.status.isopen; };
});
i you're using lower version of angular 1.3.0, <a href class="dropdown-toggle {{ disabledropdown }}" dropdown-toggle>
binds 2 dropdown-toggle directives. when click element first directive opens dropdown , second 1 closes immediately.
delete attribute dropdown-toggle
element , should work.
Comments
Post a Comment