标签: angular-ui-bootstrap

我正在使用Angular UI模式,并希望将其缩小.根据Bootstrap的网站,为了使模态更小,我应该使用modal-sm修饰符类:

<div class="modal-dialog modal-sm">

我无法将此div合并到我的Angular模态模板中.我发现的每个Angular UI模态示例都只包含模板中的modal-header,modal-body和modal-footer div.外部模态,模态对话和模态内容div是否已由Angular提供？如果是这样,有没有办法覆盖它们,以便我可以将"modal-sm"应用于模态对话框div？我尝试将完整的模态div结构添加到模板中,这会导致我的模态出现问题.我也尝试在我的控制器中设置windowClass ="modal-dialog modal-sm",但这也不起作用.有任何想法吗？谢谢.

更新:这是我尝试包含外部Bootstrap div后我的模态模板的内容.这是一个非常简单的模式,用于确认用户想要删除项目.

<div class="modal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
           <div class="modal-header">
                <h4>Confirm Delete</h4>
           </div>
           <div class="modal-body">
               <p>Are you sure you want to delete?</p>
           </div>
           <div class="modal-footer">
               <button class="btn btn-primary" ng-click="confirm()">Confirm</button>
               <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
           </div>
        </div>
     </div>
 </div>

结果是它没有正确显示我的模态.我可以看到背景和我认为是我的模态的一小部分.

更新:使用@ lmyers的解决方案对我有用,但不是将宽度指定为60%,而是使用@ modal-sm Less变量进行以下操作.

.confirm-modal .modal-dialog {
    width: @modal-sm;
}

我试图从这里集成一个Angular UI分页指令 - > http://angular-ui.github.io/bootstrap/#/pagination

问题是,当我点击任何分页按钮时,我收到以下错误.

Error: [$compile:nonassign] Expression 'undefined' used with directive 'pagination' is non-assignable!
http://errors.angularjs.org/1.3.0-beta.7/$compile/nonassign?p0=undefined&p1=pagination
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:78:12
    at parentSet (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:6618:25)
    at Object.parentValueWatch (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:6632:23)
    at Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:12550:40)
    at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:12823:24)
    at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:19757:21)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:2883:10
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:327:20)
    at HTMLAnchorElement.eventHandler (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:2882:5) angular.js:10028
(anonymous function) angular.js:10028
(anonymous function) angular.js:7349
Scope.$digest angular.js:12577
Scope.$apply angular.js:12823
(anonymous function) angular.js:19757
(anonymous function) angular.js:2883
forEach angular.js:327
eventHandler

这是分页元素的代码:

<pagination total-items="totalItems" max-size="5" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="PageChanged()"></pagination>

这似乎是指令本身的一个错误,但我不确定.

我正在使用ratingangular bootstrap ui 的指令.如何将自定义图像用作图标而不是glyphicon？

我现在正在使用语义UI而不包含Bootstrap，因为它们之间存在一些冲突。但是我非常喜欢bootstrap的Carousel功能。我可以选择将其包含在我的项目中吗？非常感谢！

我正在尝试使用angular-ui Bootstrap datepicker指令来选择年份.

它在内联时工作,但不在弹出窗口中.通过datepicker-options设置选项与弹出窗口无关.

看到这个Plunker:http://plnkr.co/edit/GRqSTCE7hOP6ZbBY3dZd

为什么这个datepicker:

<datepicker ng-model="dt"    datepicker-mode="'year'"
    min-mode="year"  min-date="minDate" 
    show-weeks="false" class="well well-sm"></datepicker>

行为与此不同:

<input type="text" class="form-control" ng-model="dt" 
         datepicker-mode="'year'"
    min-mode="year"  min-date="minDate" 
    show-weeks="false"
    datepicker-popup="{{format}}"  is-open="opened" ng-focus="open($event)"
          date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

我错过了什么？

我试图在我的rails应用程序中使用示例accordion指令,但收到以下错误,我的浏览器崩溃

Template for directive 'accordionGroup' must have exactly one root element.  
template/accordion/accordion-group.html

我的HTML视图与示例手风琴相同(此处为了可读性而缩短)

<div ng-controller="AccordionDemoCtrl">

  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
  </accordion>
 </div>

我的路线:

angular
  .module('App', [
    'ngRoute',
    'templates',
    'ui.bootstrap'
  ])
    .when('/page', {
      templateUrl: 'page.html',
      controller: 'PageCtrl'
    })
    $locationProvider.html5Mode(true);
  });

我也使用角度模板gem并且不确定它是否与它有任何关系.

问题,

我希望我的警报显示在右上角.我怎么用bootstrap做到这一点？目前我的HTML看起来像这样.

  <div class="notification">
        <alert ng-repeat="alert in alerts" type="{{alert.type}}"  close="alert.close()">{{alert.msg}}</alert>
      </div>

我正在使用ui-bootstrap进行角度和推特.

这里有Stack Overflow和AngularJS的新秀.我正在尝试在我的下拉列表中添加淡入动画(来自UI Bootstrap的下拉指令),但无济于事.

这与这个问题非常类似: Bootstrap 3下拉过渡 ,但我想知道是否有一个Angular(非jQuery)方式呢？

很高兴在这里问我的第一个问题.

这是我正在使用的代码(从UI Bootstrap的默认Dropdown中提取):

<div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

这里是吸血鬼:http://plnkr.co/edit/CmAZv4DTeda4X0bnkQwQ

我必须将几个参数放到模态的控制器上,这样我就可以显示模态中的某些值[uts in the modal

var app = angular.module('myApp', ['ui.bootstrap']);
   app.controller('ctrlTags', function($scope, $uibModal, $log){
//        $scope.items = tagsData;
       $scope.data = {
           repeatSelect: null,
           availableOptions: [
               {id: '1', name: 'Option A'},
               {id: '2', name: 'Option B'},
               {id: '3', name: 'Option C'}
           ],
       };
        $scope.myVar = false;
        $scope.show = function () {
            $scope.myVar = false;
        }
        $scope.hide = function () {
            $scope.myVar = true;
        }
       $scope.open = function() {
           var modalInstance = $uibModal.open({
               templateUrl: 'myModl.html',
               controller: 'ModalInstanceCtrl',
               resolve: {
                   param: function () { …

有没有办法在ng-repeat的前5个之后仅对每个元素使用ng-class？

这是仅针对最后一个元素的方式.

  <div ng-repeat="file in files" ng-class="{'last':$last}">
    {{file.name}}
  </div>

但是,我只想在前5个后面的每个元素中添加"hidden-md"类.

  <div ng-repeat="file in files" ng-class="{'hidden-md':$addClassToAllAfterFirst5}">
    {{file.name}}
  </div>