我一直在使用angularJS编写Web应用程序的后端.应用程序应允许用户通过弹出的聊天框(gmail/fbook中的类型)联系其他用户.我一直试图跳过使用jquery并使用angular-bootstrap模式在angularJS中编写此组件,但是用户还需要能够在聊天框打开时在页面中导航.
我知道StackOverflow更喜欢更直接的问题但是我没有在网上找到很多关于在angularJS中写这个问题的内容,我想知道是否有人知道如何使用angularJS,HTML和CSS编写弹出式聊天框.
我希望在我正在构建的应用程序中使用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)我的模态上有一个取消按钮,并且有一个点击功能,可以调用:
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)
但我想解决它。你知道我该如何解决这个问题吗?
我正在尝试通过 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工具提示.当我这样做时,悬停右键会破坏所有按钮样式.
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
这是用Angularjs制作的非常干净且易于使用的日历。
https://mattlewis.me/angular-bootstrap-calendar/
如果您单击任一天边缘的数字,则将切换到日视图。我想禁用它,但我不知道如何。
请帮忙。
如果我将我的角度版本更新为更高版本,我相信它会起作用,但是我更依赖于1.3.20角度版本。
我尝试了angular-bootstrap版本从1.1到latest,都无法使用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,因为它已经过时了。
这是一个简单的下拉菜单,应该仅在外部单击时关闭。它曾经在早期版本(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)