标签: angular-ui-bootstrap

我想知道是否有可能在angularjs bootstrap tabset选项卡标题内编写html.我想在标题中添加一个svg.我已经在plunker中创建了一个快速片段来尝试演示我遇到的问题.

<tabset>
  <tab heading="<span>hello</span><em>1</em>">One</tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

有任何想法吗？

谢谢

我对angularjs ui datepicker有一个"小"问题.我需要以某种方式表明,如果带有datepicker附加的输入,应该显示输入左下角的弹出窗口(默认情况下)

或者如果我想从输入的右下角代替它.这是因为在我创建的页面中,我的输入非常接近页面的右侧,当我附加日期选择器时,会发生这种情况(日期选择器被剪切,现在出现水平滚动):

但问题是我需要两个位置的日期选择器(根据图像中的相关案例).

有人知道如何解决这个问题？我已经尝试left在datepicker弹出模板中更改内联属性,但它始终是固定值,我认为这不是真正的选择.

谢谢

在我目前的用例中,我试图使用angular-ui模态窗口来显示我们在后台进程中执行的计算进度,我们在完成时禁用它.

一切顺利.我只是想禁止用户点击后台的任何元素.

知道我们怎么能这样做？

我正在使用angular-ui bootstrap datepicker.现在我需要从datepicker中删除#(周)列和周按钮.这个日期选择器正在我的应用程序的许多形式中使用.我想从所有这些中删除周列.

为此,我在全局配置了datepickerConfig(show-weeks),但它仍无效.任何人都可以让我知道我做错了吗？

我有一个表格,每个单元格都有一个popover,如下例所示:

对popover的调用:

<td ng-repeat="i in c.installments" ng-class="{ 'first' : i.first, 'last' : i.last, 'advance' : i.advance.value > 0, 'edited' : i.edited, 'final-installment' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? 'Advance' : 'Installment ' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >

弹出模板:

<script type="text/ng-template" id="editPopoverTemplate.html">
    <form name="editPayment">
      <h2>{{payment.amount.value|currency:undefined:cents}}</h2>
      <div class="form-group" ng-class="{ 'has-error' : editPayment.newpayment.$invalid }">
        <label>New value:</label>
        <input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="10" required>
        <span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
          <span ng-message="required">The value is mandatory</span> …

我有处理模态的角度服务:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    return $uibModal.open(options);
  }
});

现在我升级到角度1.6并得到此错误:

可能是未处理的拒绝:背景点击

每当我打开一个模态并单击其他地方(背景)并且模态关闭(按预期).所以我想unhandled exception在我处理这个,ModalService因为我不想每次使用时都处理这种情况ModalService.通过背景点击关闭模态总是可以的,这也不例外.

我试过了:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    var modalInstance = $uibModal.open(options);
    modalInstance.result.catch(function error(error) {
      if(error === "backdrop click") {
        // do nothing
      } else {
        throw error;
      }
    })
    return modalInstance;
  }
});

但这会导致我无法处理其他错误的问题,而不是backdrop click总是抛出它们:

ModalService.open({...}).result.catch(function(error) {
  // this will catch the error too, but the throw in the ModalService
  // will occure in parallel and will …

Angular UI Bootstrap对话框易于实现,但难以自定义.

你到底怎么改变宽度？甚至最大宽度？

http://angular-ui.github.com/bootstrap/#/dialog

我尝试过$dialog.dialog({width:600})和其他变化,但没有快乐.

AngularJS的新功能,似乎无法找出此错误的含义.我发现其他一些人有同样的错误,但似乎他们的问题与我的问题无关.

未知的提供者:$ modalProvider < - AngularJS的$ modal错误(似乎我有最新的ui-bootstrap版本)

所有其他人似乎都有模态的范围问题,但我似乎无法开始模态,所以我认为这些不相关.请告诉我,如果我错了,情况如何:

使用AngularUI Bootstrap Modal在AngularJS中的范围问题

Angular UI模式的范围问题

我ui-bootstrap-tpls-0.6.0.min.js从这里抓住了脚本:https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files我甚至尝试添加ui-bootstrap-0.6.0.min.js脚本,并认为可能需要它.虽然如果我正确地阅读它,似乎我选择了ui-bootstrap-0.6.0.min.js脚本我还需要在这里获取所有模板https://github.com/angular-ui/bootstrap/tree/master/template 这似乎是如果我只使用基于错误的脚本:

Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html

我已经创建了一个包含所有内容的插件,以简化解释结构等,并在此处粘贴所有代码.

http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview

错误(通过在控制台打开的情况下测试plunker上的代码可以看到)如下:

Error: Unknown provider: $modalInstanceProvider <- $modalInstance
     at Error (<anonymous>)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
     at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
     at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444)
     at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
     at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)

如果有人能够对我在这里做错了什么有所了解.它似乎不是范围问题.更像是设置问题,还是我手动引导应用程序的方式？

我有一个包含在指令中的angularUi模态窗口:

HTML:

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="main.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div my-modal="{ data: 'test2'}">test2</div>

  </body>
</html>

JavaScript的:

angular.module('plunker', ['ui.bootstrap', 'myModal']);

angular.module("myModal", []).directive("myModal", function ($modal) {
    "use strict";
    return {
      template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
      replace: true,
      transclude: true,
      scope: {
        rowData: '&myModal' 
      },
      link: function (scope, element, attrs) {
        scope.clickMe = function () {
            $modal.open({
            template: "<div>Created By:" + scope.rowData().data + "</div>"
                        + "<div class=\"modal-footer\">"
                        + "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
                        + "<button class=\"btn …

这有点奇怪.当我在网上搜索这个问题时,我看到了许多Google搜索结果和SO解决方案...但似乎没有一个工作!

简而言之,我正在尝试实现AngularUI Bootstrap Modal.我一直收到以下错误:

错误:[$ injector:unpr]未知提供者:$ uibModalInstanceProvider < - $ uibModalInstance < - addEntryCtrl

这是我的HTML:

<nav class="navbar navbar-default">
  <div class="container">
    <span class="nav-col" ng-controller="navCtrl" style="text-align:right">
      <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

这是我的控制器:

var app = angular.module('nav', ['ui.bootstrap']);

app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
  $scope.open = function() {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'addEntry/addEntry.html',
      controller: 'addEntryCtrl',
    });
  };
}]);

最后,这是我的模态代码:

var app = angular.module('addEntry', ['firebase', 'ui.bootstrap']);

app.controller('addEntryCtrl', ['$scope', '$firebaseObject', '$state', '$uibModalInstance', function($scope, $firebaseObject, $state, $uibModalInstance) {
  $scope.cancel …