标签: angular-ui-bootstrap

我想在页面上有几个日期选择器.但是使用UI-Bootstrap的默认解决方案是不可能的,不能打开任何一个日期选择器.相互冲突.这是我的代码:

<div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </div>

我刚刚从网站http://angular-ui.github.io/bootstrap/#/datepicker上复制/粘贴了datepicker代码.他们互相冲突.当我单击<input>字段打开日期选择器时,没有人可以正常打开,两者都打开一秒钟并立即消失.

我怎么能在一个页面上有几个日期选择器？

我想在ui.bootstrap.modal中使用angular组件.角度版本是1.5.
我尝试使用如下.

零件

function MyComponentController($uibModalInstance){
  var ctrl = this;

  ctrl.doSomething = function() {
    //doSomething
  }
}

app.component('myComponent', {
  contoller: MyComponentController,
  templateUrl: '/path/to/myComponent.html'
}

父控制器

function parentController($uibModal){
  var ctrl = this;

  ctrl.openModal = function(){
    var modalInstance = $uibModal.open({
      template: '<my-component></my-component>'

  }
}

当我执行时parentController.openModal(),我得到了$ injector:unpr未知提供程序的错误,虽然模态窗口是打开的.
有没有办法在ui.bootstrap.modal中使用角度组件？如果您需要更多信息,请告诉我.
谢谢.

编辑
我有一种方法可以使用来自Renato Machado的ui.bootstrap.modal组件,感谢Renato.
但我觉得它有点复杂,不方便.所以最后我认为在模态中使用组件会更好.
Modal以常规方式打开(只需设置控制器和模板$uibModal.open({})),模态包含具有您想要常用的逻辑的组件.
模态应该只有与模态相关的简单逻辑,如关闭模态窗口.
另一个主要与业务/应用程序相关的逻辑应该在组件中.
它很容易共同化.

我想在我的项目中使用AngularJS UI Bootstrap选项卡,但我需要它来支持路由.

例如:

Tab         URL
--------------------
Jobs       /jobs
Invoices   /invoices
Payments   /payments

据我所知,源代码中,当前tabs和pane指令不支持路由.

添加路由的最佳方法是什么？

我想要2个日期选择器,我正在使用Angular UI版本0.11.0.

我的HTML代码

<span ng-if="periods.period == 10">
     <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="opened1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />
     <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>

</span>


<span ng-if="periods.period == 10"> 
- 
    <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customEndDate" is-open="opened2"  min-date="cdate.customStartDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"  ng-required="true" close-text="Close" class="input-md" />
    <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>   
</span>

我的JS代码是`

                     $scope.disabled = function(date, mode) {
                      return ( mode === 'day' && ( date.getDay() === -1 || date.getDay() === 7 ) );
                     };

                     $scope.maxDate = new Date();


                       $scope.open = …

我正在使用Angular-Bootstrap Dropdown.我想阻止它关闭点击,直到用户故意关闭它.

默认状态为:单击文档中的某个位置时,Dropdown关闭.

我确定了相关的代码行:(第12行,dropdown.js)

this.open = function( dropdownScope ) {
   if ( !openScope ) {
     $document.bind('click', closeDropdown); // line to unbind
     $document.bind('keydown', escapeKeyBind);
   }
}

你可以在这里找到完整的代码:链接到Github

我不想更改angular-bootstrap的原始来源以保持我的项目更新.

我的问题:

如何将指令绑定的事件解除绑定到角度控制器中的文档？

我正在使用Angular UI bootstrap模式对话框并在服务中创建它:

myApp.factory('ModalService', ['$modal', function($modal) {
    return {
        trigger: function(template) {
            $modal.open({
                templateUrl: template,
                size: 'lg',
                controller: function($scope, $modalInstance) {
                    $scope.ok = function() {
                        $modalInstance.close($scope.selected.item);
                    };
                    $scope.cancel = function() {
                        $modalInstance.dismiss('cancel');
                    };
                }
            });
        },
        close: function() {
            // this should close all modal instances
        }
    };
}]);

ModalService.close()从控制器调用时,如何关闭所有模态实例？

我正在使用ui-bootstrap(angular-bootstrap)库中的分页指令.初始化时我遇到了问题.当我通过url导航到特定页面时,会出现问题.

发生的事情是我的控制器使用$ stateParams中的正确页面进行初始化,然后分页指令初始化并触发ng-change函数,该函数将页面重置为1.现在不再使用on-select-page,是否存在一种只捕获用户点击以更改页面的方法？理想情况下,我希望指令在控制器之前初始化,以便我的页面不会被重置.先感谢您.

如果需要,我可以包含代码,但我觉得我的问题不一定需要代码块.

在撰写本文时,Angular UI Bootstrap基于Twitter Bootstrap 2,而最新版本是Bootstrap 3.如果我要在今天的Angular.js中编写应用程序,我应该使用哪种UI框架？Angular UI还是普通的Bootstrap？

有什么利弊？无论是长期还是短期.

我正在尝试使用http://angular-ui.github.io/bootstrap/在Angular中实现一个typeahead

看起来应该很容易,但我收到以下错误:

全局符号$viewValue需要显式包名称.

什么是$viewValue？似乎没有定义.

谢谢

有没有办法告诉Angular UI中使用Bootstrap选项卡时选择了哪个选项卡？

我尝试观看窗格数组,但切换选项卡时似乎没有更新.选择选项卡时,可以指定回调函数吗？

使用代码示例更新.

代码非常遵循Angular UI引导程序页面中的示例.

标记:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

控制器:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};