Angular UI Bootstrap对话框易于实现,但难以自定义.
你到底怎么改变宽度？甚至最大宽度？
http://angular-ui.github.com/bootstrap/#/dialog
我尝试过$dialog.dialog({width:600})和其他变化,但没有快乐.
我有以下Angular UI-Bootstrap typeahead工作得很好:
<input class="span2" type="text" ng-model="selectedStuff" typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue"/>
虽然,它几乎工作得太好了.我能够显示出AND stuffs.name的目的typeahead,选择完整的stuff对象stuffs.问题是我$viewValue匹配所有属性stuff而不仅仅是stuff.name.我试过把它添加.name到各个地方typeahead,没有运气.是否有一种直接的方式来显示和匹配.name但仍然返回整个对象？
AngularJS的新功能,似乎无法找出此错误的含义.我发现其他一些人有同样的错误,但似乎他们的问题与我的问题无关.
未知的提供者:$ modalProvider < - AngularJS的$ modal错误(似乎我有最新的ui-bootstrap版本)
所有其他人似乎都有模态的范围问题,但我似乎无法开始模态,所以我认为这些不相关.请告诉我,如果我错了,情况如何:
使用AngularUI Bootstrap Modal在AngularJS中的范围问题
我ui-bootstrap-tpls-0.6.0.min.js从这里抓住了脚本:https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files我甚至尝试添加ui-bootstrap-0.6.0.min.js脚本,并认为可能需要它.虽然如果我正确地阅读它,似乎我选择了ui-bootstrap-0.6.0.min.js脚本我还需要在这里获取所有模板https://github.com/angular-ui/bootstrap/tree/master/template
这似乎是如果我只使用基于错误的脚本:
Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html
我已经创建了一个包含所有内容的插件,以简化解释结构等,并在此处粘贴所有代码.
http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview
错误(通过在控制台打开的情况下测试plunker上的代码可以看到)如下:
Error: Unknown provider: $modalInstanceProvider <- $modalInstance
at Error (<anonymous>)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444)
at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)
如果有人能够对我在这里做错了什么有所了解.它似乎不是范围问题.更像是设置问题,还是我手动引导应用程序的方式？
我有一个包含在指令中的angularUi模态窗口:
HTML:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="main.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div my-modal="{ data: 'test2'}">test2</div>
</body>
</html>
JavaScript的:
angular.module('plunker', ['ui.bootstrap', 'myModal']);
angular.module("myModal", []).directive("myModal", function ($modal) {
"use strict";
return {
template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
replace: true,
transclude: true,
scope: {
rowData: '&myModal'
},
link: function (scope, element, attrs) {
scope.clickMe = function () {
$modal.open({
template: "<div>Created By:" + scope.rowData().data + "</div>"
+ "<div class=\"modal-footer\">"
+ "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
+ "<button class=\"btn …这有点奇怪.当我在网上搜索这个问题时,我看到了许多Google搜索结果和SO解决方案...但似乎没有一个工作!
简而言之,我正在尝试实现AngularUI Bootstrap Modal.我一直收到以下错误:
错误:[$ injector:unpr]未知提供者:$ uibModalInstanceProvider < - $ uibModalInstance < - addEntryCtrl
这是我的HTML:
<nav class="navbar navbar-default">
<div class="container">
<span class="nav-col" ng-controller="navCtrl" style="text-align:right">
<a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a>
</span>
</div>
</nav>
这是我的控制器:
var app = angular.module('nav', ['ui.bootstrap']);
app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.open = function() {
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'addEntry/addEntry.html',
controller: 'addEntryCtrl',
});
};
}]);
最后,这是我的模态代码:
var app = angular.module('addEntry', ['firebase', 'ui.bootstrap']);
app.controller('addEntryCtrl', ['$scope', '$firebaseObject', '$state', '$uibModalInstance', function($scope, $firebaseObject, $state, $uibModalInstance) {
$scope.cancel …angularjs angular-ui-bootstrap angular-bootstrap angular-ui-modal
我试图使用angular-ui-datepicker作为月份选择器.但是无法配置它,尝试了所有.这是PLUNKER.
我试着将模式设置为
<input type="text" class="form-control col-md-3"
datepicker-popup="MMM-yyyy" min-mode="'month'" datepicker-mode="'month'"
ng-model="dt" is-open="opened" close-on-date-selection="true"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
show-button-bar="false" show-weeks="false"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
并且作为:datepicker-options的一部分,使用JS作为
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1,
'datepicker-mode':"'month'",
'min-mode':"month" };
但这也行不通.请帮忙
我有一个ng-repeat,每行都有多个UI-Bootstrap Datepickers.当选择日期并且选择器关闭时,我试图在我的控制器中调用一个函数.我已经尝试使用UI-Event来捕获模糊事件,但是当调用它时模型尚未更新.我的问题是如何在选择器关闭时获得所选日期？我可以做类似的事情ui-event="{ blur : 'myBlurFunction( $event, this.text)' },还是有另一种方法来获取onClose事件的数据？
<li ng-repeat="....">
<div ng-click="openEditStartCal($event, ticket)">
<input ui-event="{ blur : 'blurredStartDate( $event, ticket, this.text)' }"
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="ticket.StartDate"
is-open="startEditTicketOpened && currentTicketUpdating == ticket.TicketId"
min-date="{{today()}}"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" />
</div>
在我的应用程序中,它使用$modal.open()函数打开一个模式弹出窗口,它使用另一个页面作为模板.单击按钮时,它显示模态弹出窗口正常.如果我单击取消按钮然后它正在调用此功能并且也正常工作.
$scope.cancel=function(){
});
但是如果用户在模态弹出窗口外单击,我们就无法通过此代码捕获该事件
$scope.dismiss=function(){
});
我怎么抓住那个事件？
我见过AngularJS的很多文章,但找不到解决方案.
我在让旋转木马正常工作方面遇到问题.我用yeomen来支撑角应用程序.我收到了这个错误
Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
at http://localhost:9000/bower_components/angular/angular.js:78:12
at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
at http://localhost:9000/bower_components/angular/angular.js:6913:13
at http://localhost:9000/bower_components/angular/angular.js:8113:11
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
at http://localhost:9000/bower_components/angular/angular.js:11659:26
at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072
Error: [$compile:ctreq] Controller 'carousel', required by directive …angularjs yeoman angular-ui angularjs-directive angular-ui-bootstrap
Ui-bootstrap版本0.12.0似乎已经破坏了一些东西.这是我的傻瓜,显示了这个问题
这适用于版本0.11.0
http://plnkr.co/edit/9XJx2c2X7lRSc6V1n5BO?p=preview
如果您更换以下行,请使用此plunkr
<script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
WITH
<script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
然后下拉停止工作(当你点击).我不确定这是否是回归,但任何变通办法都会有所帮助.0.12.0有一堆对我很重要的修复,因此我必须升级.
任何帮助表示赞赏.
angularjs ×10
angular-ui ×4
datepicker ×1
javascript ×1
jquery-ui ×1
modal-dialog ×1
yeoman ×1