标签: angular-ui-bootstrap

在cdnjs 的Angular-UI-Bootstrap页面上说:

Twitter的Bootstrap的Native AngularJS(Angular)指令.占用空间小(5 kB gzipped!),无需第三方JavaScript依赖(jQuery,Bootstrap JavaScript)!

......并且可以选择

//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js

和

//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js

差异这些显示出微妙的差异,我似乎无法找到任何文件......

简而言之,除非您要创建自定义模板,否则请使用tpls.

它在此处记录:github.com/angular-ui/bootstrap/tree/gh-pages#build-files(也从主页链接).简而言之,-tpls版本捆绑了默认的Bootstrap模板.在任何情况下,您应该只包括列出的文件之一. - 谢谢pkozlowski.opensource

我想对第三方指令(特别是Angular UI Bootstrap)做一个小修改.我只想添加到pane指令的范围:

angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
  // various methods
}])
.directive('tabs', function() {
  return {
    // etc...
  };
})
.directive('pane', ['$parse', function($parse) {
  return {
    require: '^tabs',
    restrict: 'EA',
    transclude: true,
    scope:{
      heading:'@',
      disabled:'@' // <- ADDED SCOPE PROPERTY HERE
    },
    link: function(scope, element, attrs, tabsCtrl) {
      // link function
    },
    templateUrl: 'template/tabs/pane.html',
    replace: true
  };
}]);

但我也想让Angular-Bootstrap与Bower保持同步.我一跑bower update,就会覆盖我的变化.

那么我该如何将这个指令与这个凉亭组件分开扩展呢？

我正在创建一个模态:

var modal = $modal.open({
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                });

有没有办法增加它的宽度？

我很好奇是否有办法覆盖ui-bootstrap-tpls文件中的单个特定模板.绝大多数默认模板都符合我的需求,但有一些我想要替换的特定模板,而不是通过抓取所有默认模板并将它们连接到非tpls版本的整个过程.

我使用angular-ui-boostrap的模块"ui.bootstrap.dropdownToggle"创建了一个带下拉导航栏的JSFiddle:http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

据我所知,这是实现这种下拉菜单的正确,有棱角的方式.就angularjs而言,"错误"的方式是包括bootstrap.js并使用"data-toggle ="dropdown"......我在这里吗？

现在我想在我的导航栏中添加响应行为,如下面的小提琴:http: //jsfiddle.net/ghtC9/6/

但是,我不喜欢上述解决方案.这家伙包括bootstrap.js!

那么将响应行为添加到现有导航栏的正确角度方式是什么？

我显然需要使用bootstraps响应式导航栏类,例如"nav-collapse collapse navbar-responsive-collapse".但我不知道怎么......

我真的很感谢你的帮助!

先感谢您!迈克尔

"解雇"模态和"关闭"模态有什么区别？

close(result) - a method that can be used to close a modal, passing a result
dismiss(reason) - a method that can be used to dismiss a modal, passing a reason

使用此处提到的示例,如何使用JavaScript而不是单击按钮来调用模态窗口？

我是AngularJS的新手,试图在这里和这里搜索文档,但没有运气.

谢谢

我想将AngularJS和Twitter Bootstrap整合到一个全新的Web应用程序中.似乎已经为Bootstrap编写了AngularJS指令.

但是,仔细观察,似乎这些指令并未涵盖所有Bootstrap.我可以将AngularUI Bootstrap代码与原始Bootstrap结合使用以获得完整性吗？它可以在第一时间完成吗？

我偶然发现了另一个名为AngularStrap的 Angular项目.我能把这三个结合起来吗？

将AngularJS和Twitter Bootstrap结合起来以获得完整性的最佳方法是什么？

我正在为一个控制器编写一个单元测试,该控制器启动$modal并使用返回的promise来执行某些逻辑.我可以测试触发$ modal的父控制器,但我不能为我的生活弄清楚如何模拟成功的承诺.

我尝试了很多方法,包括使用$q和$scope.$apply()强制解决承诺.然而,我得到的最接近的东西是把这个 SO帖子中的最后一个答案放在一起;

我已经看过这个用"旧" $dialog模态问了几次.关于如何使用"新" $dialog模式,我找不到多少.

一些指针将受到赞赏.

为了说明问题,我正在使用UI Bootstrap文档中提供的示例,并进行了一些小的编辑.

控制器(主要和模态)

'use strict';

angular.module('angularUiModalApp')
    .controller('MainCtrl', function($scope, $modal, $log) {
        $scope.items = ['item1', 'item2', 'item3'];

        $scope.open = function() {

            $scope.modalInstance = $modal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    items: function() {
                        return $scope.items;
                    }
                }
            });

            $scope.modalInstance.result.then(function(selectedItem) {
                $scope.selected = selectedItem;
            }, function() {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };
    })
    .controller('ModalInstanceCtrl', function($scope, $modalInstance, items) …

我在角度应用程序中使用bootstrap日期选择器.然而,当我从该日期选择器中选择一个日期选择器时,我已经更新了绑定的ng-model,我想要一个日期格式为'MM/dd/yyyy'的ng-model.但它每次都像这样约会

"2009-02-03T18:30:00.000Z"

代替

02/04/2009

我为同一个plunkr链接创建了一个plunkr

我的Html和控制器代码如下所示

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
    <p>above filter will just update above UI but I want to update actual ng-modle</p>


    <h4>Popup</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control"
              datepicker-popup="{{format}}" 
              ng-model="dt"
              is-open="opened" min-date="minDate"
              max-date="'2015-06-22'" 
              datepicker-options="dateOptions" 
              date-disabled="disabled(date, mode)" 
              ng-required="true" close-text="Close" />
              <span class="input-group-btn"> 
                <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p> …