标签: angular-bootstrap

AngularJS弹出式聊天框

我一直在使用angularJS编写Web应用程序的后端.应用程序应允许用户通过弹出的聊天框(gmail/fbook中的类型)联系其他用户.我一直试图跳过使用jquery并使用angular-bootstrap模式在angularJS中编写此组件,但是用户还需要能够在聊天框打开时在页面中导航.

我知道StackOverflow更喜欢更直接的问题但是我没有在网上找到很多关于在an​​gularJS中写这个问题的内容,我想知道是否有人知道如何使用angularJS,HTML和CSS编写弹出式聊天框.

html javascript node.js angularjs angular-bootstrap

2
推荐指数
1
解决办法
4204
查看次数

Angular Bootstrap Carousel Slide Transition无法正常工作

我希望在我正在构建的应用程序中使用Angular Bootstrap Carousel Directive.

我能够很好地实现它,但转换不起作用如何在文档中显示.应该发生的是旧图像向左滑动,新图像从右侧滑入.

我还注意到,如果你点击'编辑Plunkr'来查看他们使用的代码,那就像我在本地实现中看到的那样做得很奇怪.

直接代码取自以下文档:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }
});
Run Code Online (Sandbox Code Playgroud)
<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head> …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-bootstrap

2
推荐指数
1
解决办法
4257
查看次数

尝试关闭模态时可能未处理的拒绝

我的模态上有一个取消按钮,并且有一个点击功能,可以调用:

onCancelClick: function () {
    $uibModalInstance.dismiss()
}
Run Code Online (Sandbox Code Playgroud)

它的工作,但犯了这个错误:

可能未处理的拒绝: undefined

或者当点击esc键时:

可能未处理的拒绝:按退出键

我知道我可以在我的配置中使用以下代码并关闭这些类型的错误:

app.config(function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
});
Run Code Online (Sandbox Code Playgroud)

但我想解决它。你知道我该如何解决这个问题吗?

angularjs angular-ui-bootstrap angular-bootstrap

2
推荐指数
1
解决办法
2833
查看次数

ngbTabset 不以编程方式更新选项卡

我正在尝试通过 ngbTabset.select() 以编程方式激活选项卡(非默认激活),但它不起作用。

<ngb-tabset #ctdTabset="ngbTabset">
     <ngb-tab id="tab1">
       <ng-template ngbTabTitle>
         <div (click)="loadView('tab1')">
            <span>Tab 1</span>
         </div>
       </ng-template>
       <ng-template ngbTabContent>
         // tab 1 content here
       </ng-template>
   </ngb-tab>
   <ngb-tab id="tab2">
       <ng-template ngbTabTitle>
         <div (click)="loadView('tab2')">
            <span>Tab 2</span>
         </div>
       </ng-template>
       <ng-template ngbTabContent>
         // tab 2 content here
       </ng-template>
   </ngb-tab>
 </ngb-tabset> 

 // component.ts
 export class DashboardComponent implements OnInit {
   @ViewChild('ctdTabset') ctdTabset;

   ngOnInit() {
     this.switchNgBTab('tab2');
   }

   switchNgBTab(id: string) {

     this.ctdTabset.select(id);
   }
 }
Run Code Online (Sandbox Code Playgroud)

它没有更新tab2,可能是我做错了什么。请,任何人都可以帮助我。你的好意将不胜感激。谢谢。

angular-bootstrap angular

2
推荐指数
1
解决办法
4744
查看次数

angular bootstrap tooltip破坏按钮组

我正在尝试在按钮组的每个按钮中添加angular-bootstrap工具提示.当我这样做时,悬停右键会破坏所有按钮样式.

HTML:

  <div class="btn-group" style="margin-top:100px;">
      <label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Left'">Left</label>
      <label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
      <label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Right'">Right</label>
  </div>
Run Code Online (Sandbox Code Playgroud)

JS:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope) {
  $scope.dynamicTooltip = 'Hello, World!';
});
Run Code Online (Sandbox Code Playgroud)

这是我的傻瓜:http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa?p=preview

tooltip angularjs angularjs-directive angular-bootstrap

1
推荐指数
1
解决办法
940
查看次数

角引导日历

这是用Angularjs制作的非常干净且易于使用的日历。

https://mattlewis.me/angular-bootstrap-calendar/

如果您单击任一天边缘的数字,则将切换到日视图。我想禁用它,但我不知道如何。

请帮忙。

javascript calendar angularjs angular-bootstrap

1
推荐指数
1
解决办法
1547
查看次数

未知提供者:$ animateCssProvider &lt;-$ animateCss &lt;-$ uibModalStack &lt;-$ uibModal

如果我将我的角度版本更新为更高版本,我相信它会起作用,但是我更依赖于1.3.20角度版本。

我尝试了angular-bootstrap版本从1.1latest,都无法使用1.3.20。我得到的只是未知的提供者。

http://plnkr.co/edit/8TynLlehbEoJF4HY9o0S?p=preview

当您注释第9行和取消注释第10行时,此plunkr代码有效。

但是,当1.3.20的ngAnimate和angular版本的angular-bootstrap版本为0.14.3时,它是非常旧的代码,它可以很好地工作。

如何在不升级角度版本的情况下解决此问题?

如果我可以$animateCss显式添加提供程序,那么它起作用吗?但我怀疑它是否会影响其他任何代码。

我不想使用angular-bootstrap的0.14.3,因为它已经过时了。

javascript angularjs angular-ui-bootstrap angular-bootstrap

1
推荐指数
1
解决办法
2925
查看次数

设置为外部单击时,角度引导下拉列表自动关闭不起作用

这是一个简单的下拉菜单,应该仅在外部单击时关闭。它曾经在早期版本(0.13)中工作。

难道我做错了什么。不想采取像停止传播和防止违约这样的解决办法。这是我最后的手段。

下面是一个简单下拉列表的 plunkr:

http://plnkr.co/edit/A2vDHb43PThalcHAhLkJ?p=preview

    <span class="dropdown" uib-dropdown auto-close="outsideClick">
      <a href="javascript:void(0);" class="dropdown-toggle" uib-dropdown-toggle>
        Click me for a dropdown, yo!
      </a>
      <ul class="dropdown-menu">
        <li>Element 1</li>
        <li>Element 2</li>
      </ul>
    </span>
Run Code Online (Sandbox Code Playgroud)

angularjs angular-bootstrap

0
推荐指数
1
解决办法
5074
查看次数