标签: angular-ui-bootstrap

我正在使用角度1.3和角度ui bootstrap和ui-grid 3(因为支持rtl).

这是傻瓜.

奇怪的问题,使用Angular UI bootstrap模式我对Angular 1.3 beta 16没有任何问题,但是如果我启用ng-strict-di模式,我会收到以下错误:

Error: [$injector:strictdi] function($scope, $modalInstance) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-beta.16/$injector/strictdi?p0=function(%24scope%2C%20xmodalInstance)
    at http://localhost:3000/vendor/angular.js:78:12
    at annotate (http://localhost:3000/vendor/angular.js:3353:17)
    at invoke (http://localhost:3000/vendor/angular.js:4037:21)
    at Object.instantiate (http://localhost:3000/vendor/angular.js:4070:23)
    at http://localhost:3000/vendor/angular.js:7451:28
    at http://localhost:3000/vendor/ui-bootstrap-tpls-0.11.0.min.js:8:28715
    at wrappedCallback (http://localhost:3000/vendor/angular.js:11616:81)
    at http://localhost:3000/vendor/angular.js:11702:26
    at Scope.$eval (http://localhost:3000/vendor/angular.js:12797:28)
    at Scope.$digest (http://localhost:3000/vendor/angular.js:12609:31) 

奇怪的是,这不是指令或服务,它只是我的一个页面背后的脚本.我知道我在那里制作一个控制器,但是......我现在还不确定.以下是生成错误的代码:

            //=================
            //MODAL PROMPTER
            //=================

            var Prompt = function(title, prompt) {
                var modalInstance = $modal.open({
                    template: '<div class="modal-header"><h3 class="modal-title">' + title + '</h3></div><div class="modal-body"><p>' + prompt + '</p></div><div class="modal-footer"><button class="btn btn-primary" …

我想知道是否有人知道如何禁用Angular UI datepicker上的月/年导航按钮(http://angular-ui.github.io/bootstrap/#/datepicker).

我们希望禁用用户点击导航箭头之间的"月/年"文本并且无法弄清楚的能力.

我们当前的配置选项如下所示:

$scope.dateOptions = {
        'year-format': "'yyyy'",
        'starting-day': 0,
        'show-weeks': false
    };

我们的HTML看起来像这样:

<span datepicker-popup="shortDate" ng-model="currentDate" is-open="isDatePickerOpen" datepicker-options="dateOptions" show-button-bar="false" ng-click="openDatePicker($event)"></span>

有没有人想到这个？

我正在尝试使用角度ui路线和角度ui模态制作状态模态.

假设我想填写一个包含4页的注册表单.所有这些页面都是模态的.

我能够在状态变化上打开模态.但之后我想在国家的基础上打开模态的每一页.

    $stateProvider.state('signup', {
  url: '/signup',
  template: '<ui-view />',
  abstract: true
})
.state('signup.modal', {
  url: '',
  resolve: {
    modalInstance: function($modal) {
      return $modal.open({
        template: '<div ui-view="modal"></div>',
        controller: 'signUp',
        windowClass: 'signup-edit-modal',
        backdrop: 'static'
      })
    }
  },
  onEnter: ['modalInstance', '$timeout', '$state',function(modalInstance,$timeout, $state) {
    modalInstance.opened.then(function(status){
      if(status){
        $timeout(function(){
          // changing color of background / backdrop of modal for signup
          angular.element('.reveal-modal-bg').css('backgroundColor','rgba(255, 255, 255, .9)');
        })
      }
    })
    $state.go('signup.welcome')
  }],
  onExit: function(modalInstance) {
    modalInstance.close('dismiss');
    angular.element('.reveal-modal-bg').css('backgroundColor','rgba(0, 0, 0, 0.45)');
  }
})
.state('signup.welcome', {
  url: "/welcome",
    views: …

我有问题ui-router和使用bootstrap崩溃.

<div class="panel panel-default" id="accordion" >
    <div role="tab" id="headingOne">
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            Click me
        </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            Data
    </div>
</div>

这是页面localhost/#/root/mypage/.所以指向"点击我" localhost:\#collapseOne会引导我进入我网站的默认页面.

我正在使用Angular UI Bootstrap.如果一个模态打开,我想显示true.如果它没有打开,我想显示false.有没有办法在HTML中执行此操作？

我尝试使用以下代码,但这是错的:

<code>myForm.$modalStack.opened={{myForm.$modalStack.opened}}</code>

有关如何正确执行此操作的任何想法？

在我用来触发模态的相关代码下面:

HTML:

<button ng-click="myForm.agreement()">

控制器中的代码:

.controller('MyFormCtrl',
  function ($location, $stateParams, $modal, $scope, $http) {
    var myForm = this;
    // . . . 

   myForm.agreement = agreement;

   function agreement() {

       $modal.open({

          templateUrl: 'views/agreement.html'
  })
});

我试图使用AngularJS和UI Bootstrap将4个变量传入和传出模态窗口.不幸的是,当我从模态窗口返回参数时,只显示其中一个参数 - 其余所有参数都返回为'undefined'!

代码:

这是我打开$ modal服务的地方,并传递4个参数:

$scope.open = function() {

    var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: 'ModalController',
        resolve: {
            var1: function() { return $scope.var1; },
            var2: function() { return $scope.var2; },
            var3: function() { return $scope.var3; },
            var4: function() { return $scope.var4; }
        }
    });

这些注入到ModalController中,如下所示:

var ModalController = function($scope, $modalInstance, var1, var2, var3, var4) {

在ModalController中,我可以很好地查看和使用这些变量.

然后我通过关闭模态窗口将它们返回到父控制器:

var ok = function() {
    $modalInstance.close($scope.var1, $scope.var2, $scope.var3, $scope.var4);
};

当在父控制器中收到这些值时问题变得清晰 - 它似乎只传递第一个参数var1.所有其他都未定义!

modalInstance.result.then(function (var1, var2, var3, var4) {
    $scope.var1 …

我想使用bootstrap-ui中的timepicker指令.我需要使用min和max属性,但我不明白如何使用它们.

我尝试在0到1440的范围内使用它.

<uib-timepicker ng-model="mytime" show-meridian="false" min="840" max="1020"></uib-timepicker>

我也尝试传递不同的日期格式,但它并没有解决我的问题.例如,我需要用户可以在14:00到17:00之间设置时间戳.如何使用该属性实现此效果？

在这里,您可以使用fint plunker.提前致谢.

我试图在下拉列表中添加Datepicker,如下所示,并设置autoClose ="outsideClick".但是,当按下任何月份按钮时,它会切换下拉列表.怎么解决这个？

Html代码:

<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
                <button class="btn btn-info" dropdown-toggle>Date Picker</button>
                <div class="dropdown-menu  datepicker" role="menu">
                        <datepicker show-weeks="false" ng-model="dt"></datepicker>
                </div>
</div>

Plunker:http://plnkr.co/edit/lBn3Oo？p = preview

<uib-tabset type="tabs">
  <uib-tab heading="Event Workflow Activities">
    <div ng-include src="'webapp/event/EventWorkflowActivities.tpl.html'"></div>        
  </uib-tab>
</uib-tabset>

我正在使用上面的UI Bootstrap选项卡,当你在标签之间切换时有没有办法让广播事件？