angular-ui-bootstrap

How to enable Bootstrap Tooltip on disabled button using AngularJS?

北慕城南 提交于 2019-12-11 04:15:54
问题 I need to display a tooltip on a disabled button and remove it if it is enabled using AngularJS. 回答1: Assuming you're using angular-ui-bootstrap: http://plnkr.co/edit/vA7sizeDWwyC7KxeuGel?p=preview <body ng-controller="MainCtrl" ng-app="plunker"> <div style="height:100px"></div> <div uib-tooltip="asdsad" tooltip-enable="disableButton" style="display:inline-block"> <button ng-disabled="disableButton" ng-style="{'pointer-events':disableButton ? 'none' : ''}">Hover over me!</button> </div> <br

AngularJS ui-bootstrap: Datepicker not working in month mode

半城伤御伤魂 提交于 2019-12-11 03:41:20
问题 I am unable to use AngularJS' ui-bootstrap's datepicker in the month mode. Here's a plunker. Here's my template : <html> <head> <link rel="stylesheet" href="style.css"> </head> <body ng-app="TestApp"> <div ng-controller="testController"> {{dt}} <datepicker ng-model="dt.from" datepicker-mode="mode" min-mode="mode"></datepicker> <datepicker ng-model="dt.to" datepicker-mode="mode" min-mode="mode"></datepicker> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.25/angular

Calling another controller within AngularJS UI Bootstrap Modal

大城市里の小女人 提交于 2019-12-11 03:40:39
问题 I have a completely working version of the ui.bootstrap.modal as per the example here http://angular-ui.github.io/bootstrap/#/modal but I want to take a stage further and add it to my controller configuration. Perhaps I'm taking it too far (or doing it wrong) but I'm not a fan of just var ModalInstanceCtrl = function ($scope... My modal open controller: var controllers = angular.module('myapp.controllers', []); controllers.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', function(

angularjs - Accessing ui-bootstrap modal dismiss and close function from another controller

断了今生、忘了曾经 提交于 2019-12-11 03:17:18
问题 i have service for modal invoking as shown. .service('modalService', ['$modal', function ($modal) { var modalDefaults = { backdrop: 'static', keyboard: true, modalFade: true }; this.showModal = function (template) { modalDefaults.template = template; modalDefaults.controller = 'modalController'; return $modal.open(modalDefaults).result; }; }]) .controller('modalController', function ($scope, $modalInstance) { console.log('modalController'); $scope.ok = function () { $modalInstance.close(

Angular UI bootstrap accordian - expand creates scrollbar and page “jump”

ぐ巨炮叔叔 提交于 2019-12-11 03:12:48
问题 I'm using the angular ui bootstrap accordian. Everything works great except when I expand an accordian section that is big enough to cause the browser to show a scrollbar for the page, the whole page jolts to the left by the amount of the width of the scrollbar. When the accordian is small enough that a scrollbar isn't needed, the page jolts back to the original size. I'm not sure what to do about this...does this require a hack, or is there some elegant solution using accordian settings or

Clear the ng-model asssociated to textarea inside Angular Bootstrap UI tabset form an outside button

瘦欲@ 提交于 2019-12-11 02:50:45
问题 I have used angular bootstrap ui tabset to create two tabs and both of the tabs have textareas associated with a ng-model , i have a clear button outside the tabset and i want to clear the ng-model of the textArea in active tab when user presses the clear button. what is the best way to do this? this is what i have done so far. HTML <tabset> <tab heading="Tab One"> <textarea data-ng-model="data.tabOne" class="form-control"></textarea> </tab> <tab heading="Tab two"> <textarea data-ng-model=

ui bootstrap datepicker inside an accordion is not visible

这一生的挚爱 提交于 2019-12-11 01:53:48
问题 I am trying to do a module with a datepicker inside an accordion. problem is the datepicker popup box is not visible over the accordion. here is a plunker showing the problem : http://plnkr.co/edit/jBqU0LXQFcUuzQLency2?p=preview any idea on how i could make the dialog window appear over the accordion module ? edit : with bootstrap 3, this is working : .panel-group .panel { overflow: inherit; } 回答1: Add this css after the bootstrap.css link can fix it. This will override the CSS relating to

AngularUI: why modal is not implemented as a directive?

人走茶凉 提交于 2019-12-11 01:35:24
问题 I am using angular-ui in my project and I wanted to implement a modal window. Most of the components of the library (http://angular-ui.github.io/bootstrap/) are implemented as directives (as expected). However, modal is not - it is implemented as a service. This leads to a strong dependency on the view in the controller (i.e. the controller needs to know that the view uses a modal window, what should not be the case). My question is: why is modal implemented as a service, not directive? Does

adding angular animation to bootstrap dropdown

浪子不回头ぞ 提交于 2019-12-11 01:00:54
问题 I want to add animations to the opening and closing of a dropdown in my angular app. So far I can get open animations working on the dropdown, but nothing for close animations. I took the navbar code straight from the bootstrap example and added it to my page with some minor modifications. The relevant part of the navbar is this: <ul class="nav navbar-nav navbar-right"> <li ng-if="isAuthenticated()" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{

How to assign value to angular pagination custom template?

半城伤御伤魂 提交于 2019-12-11 00:33:08
问题 I am using custom template for angular pagination: <uib-pagination boundary-links="(vm.pagination.boundaryLinks == false) ? false : true" num-pages="vm.pagination.numPages" total-items="vm.pagination.totalItems" items-per-page="vm.pagination.itemsPerPage" ng-model="vm.pagination.currentPage" max-size="(vm.pagination.pager == true) ? 0 : 10" template-url="pagination.html" ng-change="vm.pagination.pageChanged(vm.pagination)"> </uib-pagination> <script id="pagination.html" type="text/ng-template