标签: angular-ui-bootstrap

我使用的是Datepicket,它是AngularJS ui-bootstrap模块的一部分.我正在按照给出的教程/示例(参见http://angular-ui.github.io/bootstrap/#/datepicker),但是当试图阻止用户选择早于今天或超过3个月的日期时,不会似乎工作正常,因为这些仍然是可点击的.

这是我视图中的日期选择器...我已经将ng-model,min-date和max-date值写入接口,以确保它们不为null)

<datepicker ng-model="dt" min-date="minDate" max-date="maxDate" show-weeks="false"></datepicker>
dt = {{ dt }}
minDate = {{ minDate }}
maxDate = {{ maxDate }}

价值正在返回....

dt = "2014-04-30T15:31:46.746Z" 
minDate = "2014-05-27T15:31:46.746Z"
maxDate = "2014-08-27T15:31:46.751Z"

这是我的控制器代码...大部分取自ui-bootstrap网站上提供的示例

$scope.today = function() {
  $scope.dt = new Date();
};
$scope.today();

$scope.toggleMin = function() {
  $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();

$scope.maxDate  = new Date(new Date().setMonth(new Date().getMonth()+3));

谁能看到我做错了什么？我看不出我犯了什么错字或错误？我在OS X 10.9.2上使用Chrome 34.0.1847.137,因此浏览器兼容性应该不是问题.

我有一个用angularjs bootstrap-ui创建的客户记录表,并使用ng-repeat.

表格中每行的末尾是一个按钮,用于获取有关客户的更多信息.

单击该按钮时,会弹出一个模态窗体并显示该信息.

我的问题是我按下哪个按钮我得到相同的客户编号

问题是我需要将$ index的值转换为以下代码:

$scope.selected = {
    customer: $scope.customers[0]
};

$ index的值需要替换上面的0值

到目前为止我所做的事情可以在plunker上点击这里看到

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
  < div class = "modal-header" > < h3 > I am a modal! < /h3>
    </div > < div class = "modal-body" > < form class = "form-horizontal"
  role = "form" > < div class = "form-group" > < label
  for = "customerNumber"
  class = "col-lg-2 control-label" > Email Address: < /label>
            <div class="col-lg-10">
                <input type="text" class="form-control" …

我在创建响应应用程序状态的模式时遇到了问题.从角度ui-router wiki我看到了如何实现我的目标,但我的代码没有工作,我不知道为什么原因如下:

1. 当应用程序路由器在模态中启动/ sign /时

2. 我可以在我的控制台上看到以下输出

   => "about.sign"

   => "about.sign.in"

3. 2)意味着路由器和射击!换句话说,应打开模态about.sign,并将about.sign.in状态模板插入其父模板,更准确地说是在标签上.

我尝试了两种技术.命名为ui-views和匿名但没有效果.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

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

  app.config(function($stateProvider){
    $stateProvider
      .state('about',{
        url: '/',
        views:{
          'main': {
            templateUrl: 'about/about.tpl.html'
          }
        }
      })
      .state('about.sign',{
        url: '',
        onEnter: function($stateParams, $state, $modal){
          console.log('about.sign')
          var modalInstance = $modal.open({
            template:'<h1>Modal</h1><div ui-view="bar-view"></div>',
            size: 'sm',
          });
        }
      })
      .state('about.sign.in',{
        url:'sign/in',
        onEnter: function($stateParams, $state, $modal){
          console.log('about.sign.in')
        },
        views: {
          'bar-view': {
            template: 'Sign in #1'
          }
        }

      })
      .state('about.sign.up',{
        url:'sign/up',
        onEnter: function($stateParams, …

我正在尝试使用模态来编辑表单,模式在ng-template脚本中,但单击编辑按钮时不显示表单数据.
$ scope不可用于模板脚本.
我在这里创建了一个Plunker

$scope.setCurrentItem = function (item) {
    $scope.currentItem = item;
};

$scope.edit = function (item) {            //editing item
    $scope.setCurrentItem(angular.copy(item));            
    //$scope.editItem = item;
    openEditModal();
};

<!--html-->
<script type="text/ng-template" id="myModalContent.html">     
<label for="name">Role: </label>                                
<input type="text" ng-model="currentItem.roleName" required />
</script>

我该如何解决这个问题？

我正在使用角度ui.bootstrap并且我已经成功创建了一个简单的下拉菜单,但当您将菜单放在页面底部时,它会离开页面.有没有办法让它在UP方向打开？

谢谢!-fotoflo

我想修改JHipster实体页面之一以使用DatePicker.我在Bower上包含依赖项,将js库url添加到索引页面.我不知道如何包括bootstrap css,我应该使用指南针还是别的什么？或者您可能知道更好的UI库.

我正在以角度创建验证指令,我需要在指令绑定的元素中添加工具提示.

通过网络阅读我发现这个解决方案设置了一个高优先级和终端指令,但由于我使用的是ngModel,这对我不起作用.这就是我现在正在做的事情:

return {
        restrict: 'A',
        require: 'ngModel',
        replace: false,
        terminal: true,
        priority: 1000,
        scope: {
            model: '=ngModel',
            initialValidity: '=initialValidity',
            validCallback: '&',
            invalidCallback: '&'
        },
        compile: function compile(element, attrs) {
            element.attr('tooltip', '{{validationMessage}');
            element.removeAttr("validator");
            return {
                post: function postLink(scope, element) {
                  $compile(element)(scope);
                }
            };
        },
}

但这对我不起作用.它会引发以下错误:

错误:[$ compile:ctreq]无法找到指令'validator'所需的控制器'ngModel'!

这是我正在使用该指令的HTML:

<input id="username" name="username" data-ng-model="user.username" type="text" class="form-control" validator="required, backendWatchUsername" placeholder="johndoe" tabindex="1" >

关于如何解决这个问题的任何想法？

谢谢.

我有一个通过单击glyphicon触发的下拉列表.glyphicon具有ui-bootstrap工具提示,在鼠标输入/鼠标离开时触发.单击glyphicon时,也会触发工具提示关闭,并显示下拉列表.

但是,一旦打开下拉列表,如果触发鼠标输入,则会再次显示工具提示.我想在下拉列表打开时阻止鼠标输入触发工具提示.

glyphicon和下拉列表的html是:

<span class="" uib-dropdown-toggle>
    <span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
        tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
        ng-click="sortTooltipIsOpen = !sortTooltipIsOpen">
    </span>
</span>

<ul uib-dropdown-menu class="dropdown-menu-right">
    <li ng-repeat="s in sortDesc" ng-click="sortBy(s)"><a href="#">{{s}}</a></li>
</ul>

我创建了一个plnkr来准确显示它是如何工作的:http://plnkr.co/edit/aeOuJasEHFUH505o2L8T

任何想法如何做到这一点？

我正在使用Bootstrap的$ uibModal在我的web应用程序中制作表单.一切正常,除了在显示对话后我无法关闭对话框.

我花了两天时间试图不在这里发布这么简单的问题,特别是当我收到的同样错误的答案很多时,即

" 未知提供者:$ uibModalInstanceProvider < - $ uibModalInstance < - ModalInstanceCtrl ".

为了使用大量应用程序轻松操作,我将代码分成单独的文件,我在htmls中使用'controller as'样式,因此,代码中没有$ scope.

无论我做什么,我都会收到我之前提到的这个错误.我需要的是在用户成功登录后关闭对话框.

index.html的:

...
    <script src="rf/angular.min.js"></script>
    <script src="rf/angular-animate.js"></script>
    <script src="rf/angular-touch.js"></script>
    <script src="rf/ui-bootstrap-tpls.js"></script>

    <!-- Project files -->
    <script src="application.js" type="text/javascript"></script> 
    <script src="frmLogin.js"></script>
</head>
<body>
    <!-- Load things into this division -->
    <div ng-include src="loaderCtrl.cFragment" ng-app="dgis" ng-controller="applicationController as loaderCtrl"></div>
</body>

的application.js

var myApp = angular
  .module('dgis', ['ui.bootstrap'])
  .controller("applicationController", ['$http', '_gl', '$uibModal', function ($http, _gl, $uibModal) {
      _gl.AppReference = this;

      // Enable animations
      this.animationsEnabled = true;

      // …

我正在使用ui-bootstrap popover在我的应用程序中列出一些通知.我正在使用uib-popover-template来设计popover的内容.

我想更改popover中每个元素的填充设置.

我尝试过使用popover-class属性,但这只是为整个popover配置CSS,而不是内部包含的元素 - 这就是.popover-content CSS类似乎可以控制的.

这是popover的html:

<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
        popover-class="my-notifications-popover"></span>

另外,我不想这样做:

.popover-content {
     margin: 0px;
}

因为我在我的应用程序中的多个地方使用了弹出窗口,并且不希望它们全部重新定义CSS.

谁能告诉我如何以正确的方式改变这种情况？所有人都非常感谢......

编辑1:我试图按照makshh的评论中的建议去做,并使用CSS选择器来修改'.popover-content'类.此类是父类'.popover'类中包含的div.

我试着用以下方法做到这一点:

.my-notifications-popover {
    margin-left: 0px;
}

.my-notifications-popover div {
    margin-left: 0px;
}

这应该使.my-notifications-popover的所有子div的margin-left为零,应该应用于popover.但它似乎根本没有应用.这种方法可能并不理想,因为它会为我可能不想要的popover下的所有div设置余量.有没有办法专门使用CSS选择器专门针对.popover-content类？

我已经创建了一个plnkr来准确显示它是如何工作的....你可以在这里看到它:https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso