i have following directive
App.directive('minuteListDirective', function () {
return {
restrict: "A,E",
required: 'ng-model',
templateUrl: "/app/profile/company-minutes/templates/minute-list.html",
controller: "CompanyMinutesController",
replace: true,
scope: {
mode: '#mode',
},
link: function (scope, el, attrs) {
},
}
});
when i remove scope: {
mode: '#mode',
},
from directive , the template render correctly as below (minute-list.html )
<div dropdown="dropdown" class="btn-group btn-group-sm">
<button dropdown-toggle="" ng-class="'btn btn-default'" class="ng-binding btn btn-default" aria-haspopup="true" aria-expanded="false">
<b class="caret"></b>
</button>
<ul role="menu" ng-class="'dropdown-menu animated flipInX'" class="dropdown-menu animated flipInX">
<li>
edit
</li>
<li class="hide-edit-mode">
delete
</li>
</ul>
</div>
but when i add scope: { mode: '#mode'} to directive the template render but it removes ng-class from rendered template
<div dropdown="dropdown" class="btn-group btn-group-sm">
<button dropdown-toggle="" ng-class="''" class="ng-binding" aria-haspopup="true" aria-expanded="false">
<b class="caret"></b>operation
</button>
<ul role="menu" ng-class="''">
<li>
edit
</li>
<li class="hide-edit-mode">
delete
</li>
</ul>
</div>
and here is original template without rendering
<div dropdown="dropdown" class="btn-group btn-group-sm">
<button dropdown-toggle="" ng-class="'btn btn-default'" class="ng-binding btn btn-default">
<b class="caret"></b> {{resources.grid.ACTION_BUTTOM_TEXT}}
</button>
<ul role="menu" ng-class="'dropdown-menu animated flipInX'" class="dropdown-menu animated flipInX">
<li>
edit
</li>
<li class="hide-edit-mode">
delete
</li>
</ul>
</div>
Related
Plnkr Link
JS Code
var id = 1;
if (id == 2) {
$scope.leftLinks = [{
Text: "Register",
Url: "/register"
}, {
Text: "Login",
Url: "/"
}];
}
else {
$scope.leftLinks =
[{
subMenus: [
{
Text: "Profile",
Url: "/profile"
},
{
Text: "Change Password",
Url: "/change-password"
},
{
Text: "Logout",
Url: "#"
}
]
}];
}
Markup
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="leftLink in leftLinks">
{{leftLink.Text}}
{{leftLink.Text}}
<a href="javascript:void(0)" role="button" area-haspopup="true" area-expanded="false" uib-dropdown-toggle ng-show="leftLink.subMenus">Hello
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ng-show="leftLink.subMenus">
<li ng-repeat="subMenu in leftLink.subMenus">
{{subMenu.Text}}
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Problem
Click on Navbar and then click on Hello: It does not show the li items
Please suggest.
It's clear that you are using click event with bootstrap component which require bootstrap javascript files. You must include it. Then you have to add a trigger to your menu. I belive the menu should be something like that :
<div class="dropdown">
<a role="button" href="#" class="dropdown-toggle"
data-toggle="dropdown" >Hello <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ng-show="true">
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</li>
</ul>
That is a little Plunker figure out your problem plunker.
I hope that helps
I'm using ui-route ui-sref in my links with the navbar using UI-Bootstrap dropdowns and if I use the anchor tag with href, the dropdown closes on click, but the anchor tags with ui-sref does not close the dropdown. I've got the following plnkr with it showing the bug.
Angular Code
angular.module('app', ['ui.bootstrap', 'ui.router'])
.config(appRoute)
.controller('myController', myController);
appRoute.$inject = ['$stateProvider'];
function appRoute($stateProvider) {
$stateProvider.state('index', {
url: '/index',
template: '<h1>indexRoute</h1>'
})
.state('other', {
url: '/other',
template: '<h1>otherRoute</h1>'
})
}
function myController() {
var ctrl = this;
ctrl.title = 'Title';
ctrl.user = 'User#user.com';
ctrl.test = test;
ctrl.test2 = test2;
function test() {
console.log('TEST LINK!')
}
function test2() {
console.log('TEST 2')
}
}
HTML
<body ng-controller="myController as $ctrl" style="{padding-top: 70px;}">
<nav id="isec-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="intelisecure-header">
<span>{{$ctrl.title}}</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li id="usermenu" class="dropdown user-menu-dropdown" uib-dropdown="">
<a href="" class="uib-dropdown-toggle username" uib-dropdown-toggle="">
<i class="fa fa-user fa-fw"></i>
{{$ctrl.user}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu">
<li role="menuitem">
<a href="/index" ng-click="$ctrl.test()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">index href</span>
</a>
</li>
<li role="menuitem">
<a ui-sref="other" ng-click="$ctrl.test2()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">other sref</span>
</a>
</li>
<li role="menuitem">
<a href="" ng-click="$ctrl.logout()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<ui-view>
<div>
test
</div>
</ui-view>
</body>
Not perfectly built, I was trying to see if I could replicate the issue with my
https://plnkr.co/edit/Rz3AbgnYnWI34DjuByY6?p=preview
Apparently this was a known issue and was resolved by updating to UI-Router 1.0.0-beta.3
In this plunk I have an Angular UI modal with a dropdown. The dropdown has the uib-dropdown dropdown-append-to-body directives to show the complete list even though it's in a div with overflow:hidden.
If you click on the button, you will see that the dropdown list is behind the modal. How to fix the z-index?
HTML
<button ng-click="openModal()">Open modal</button>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>
<div style="background-color:orange;overflow-y:hidden;height:30px">
<div class="btn-group" uib-dropdown dropdown-append-to-body>
<button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle="">
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem">
Action
</li>
<li role="menuitem">
Another action
</li>
<li role="menuitem">
Something else here
</li>
<li class="divider"></li>
<li role="menuitem">
Separated link
</li>
</ul>
</div>
</div>
</script>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {
$scope.openModal = function() {
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope
});
};
});
Add this class to your CSS file
.dropdown-menu.model-top{
z-index:39999;
}
HTML
<ul class="dropdown-menu model-top" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body"></ul>
NB: inline CSS not work, the are replacing the style attribute with their own styles, like position, height
use z-index like this:
<div class="btn-group" uib-dropdown dropdown-append-to-body>
<button id="btn-append-to-body" type="button"
class="btn btn-primary" uib-dropdown-toggle>
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-body"
style="z-index:39999">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
How can I add the selected item from dropdown menu to the button that opens that dropdown?
Example: I want to replace 'DIFFERENCES' with text selected from the dropdown menu; if I select 'All' then the text 'DIFFERENCES' should be replaced with 'All'...
<div class="filter-requests btn-group">
<div data-toggle="dropdown">
<a href="#" class="btn btn-default dropdown-toggle">
DIFFERENCES
<i class="fa fa-chevron-down"></i>
</a>
</div>
<ul class="dropdown-menu">
<li>All</li>
<li><a href="#" >Exclusions</a></li>
<li><a href="#" >Differences</a></li>
<li><a href="#" >Variable Differences</a></li>
<li><a href="#" >Path Differences</a></li>
</ul>
</div>
view.html
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{selected || 'Select one'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
controller.js
$scope.selected = null;
$scope.changeOption = function(text) {
$scope.selected = text;
}
try like this.
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.row = "";
$scope.items = ['All','Exclusions','Differences','Variable Differences'];
$scope.selectRow = function(item){
$scope.row = item;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="filter-requests btn-group">
<div data-toggle="dropdown">
<a href="#" class="btn btn-default dropdown-toggle">
{{row}}
<i class="fa fa-chevron-down"></i>
</a>
</div>
<ul class="dropdown-menu" >
<li ng-repeat="item in items" ng-click="selectRow(item)">
{{item}}
</li>
</ul>
</div>
I have this code :
<div >
<ul class="nav nav-pills nav-stacked" data-ng-repeat="filter in filters">
<li class="" >
<a class="" data-toggle="collapse" href="#collapse{{filter.year}}">
{{filter.year}}
</a>
<ul class="nav nav-pills nav-stacked panel-collapse collapse" id="collapse{{filter.year}}">
<li>January</li>
</ul>
</li>
</ul>
</div>
I would like that when I click the years the second show the data...
But it doesn't work
Try ng-href instead:
Quoted from the doc:
Using Angular markup like {{hash}} in an href attribute will make the
link go to the wrong URL if the user clicks it before Angular has a
chance to replace the {{hash}} markup with its value. Until Angular
replaces the markup the link will be broken and will most likely
return a 404 error.
Use angularui toggle collapse (http://angular-ui.github.io/bootstrap/). In the outer ul set ng-click="isCollapsed = !isCollapsed" and in the inner ul set collapse="isCollapsed".
module.directive('collapseDirective', function(){
return {
restrict: 'EA',
transclude: 'true',
link: function(scope, element, attrs){
scope.isCollapsed = true;
};
}
});
<div collapse-directive>
<ul class="nav nav-pills nav-stacked" data-ng-repeat="filter in filters">
<li>
<a ng-click={isCollapsed=!isCollapsed} class="" data-toggle="collapse" href="#collapse{{filter.year}}">
{{filter.year}}
</a>
<ul collapse=isCollapsed class="nav nav-pills nav-stacked panel-collapse collapse" id="collapse{{filter.year}}">
<li>January</li>
</ul>
</li>
</ul>
</div>