ドロップダウンを切り替えていないように見える Angular Bootstrap ドロップダウン メニューがあります。クリックしても何も表示されませんが、検査要素のリスト項目は表示されます。
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>
ドロップダウン コントロール:
'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 is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
});