代码摘要:
main.js:
require.config({
paths: {
'uiBootstrap': '../lib/bootstrap/angular-bootstrap/ui-bootstrap-tpls.min'
},
shim: {***},
priority: ['angular'],
deps: [
'./bootstrap'
]
});
bootstrap.js:
define([
'require',
'angular',
...
], function (require, ng) {
'use strict';
require([
'domReady!',
'uiBootstrap'
], function (document) {
ng.bootstrap(document, ['app']);...
app.js:
define([
'angular',
...
], function (ng) {
'use strict';
return ng.module('app', [
...
'uiBootstrap'
]);
});
尝试不同的组合时,我遇到了一系列不同的错误.直到我进入ui-bootstrap-tpls.min.js并实际上将所有ui.bootstrap替换为uiBootstrap并修改了模块名称引用,如上所示.并且presto - ui-bootstrap工作正常.
显然,这不是最佳解决方案.
任何人都可以提供深入了解为什么会发生这种情况以及解决问题的更好方法是什么,所以我不会公开使用这个源代码修改过的ui-bootstrap？
谢谢!
我刚刚将angularjs从angularjs 1.2.9升级到angularjs 1.2.19并且angularjs bootstrap版本.7升级到.11
我现在得到一个我不确定的东西.
这是错误:
TypeError:ngModelCtrl.$ render不是函数
该$render错误似乎是由于第2201行的ui-bootstrap-0.11中的一行造成的.
$scope.$watch('totalPages', function(value) {
setNumPages($scope.$parent, value); // Readonly variable
if ( $scope.page > value ) {
$scope.selectPage(value);
} else {
ngModelCtrl.$render();
}
});
}])
由于我的升级,这必须是一个错误...任何人对我应该如何处理这个有任何建议？
谢谢,
戴夫
我正在尝试实现延迟授权,只有当用户触发调用需要身份验证的API时才会引入登录对话框.我正在使用bootstrap ui.bootstrap.modal(以及模态中的ui.bootstrap.alert).问题是这些指令明确指定了以下内容teamplateUrl:
modal.js 这里)modal.js 这里)alert.js 这里)像这样:
.directive('modalBackdrop', ['$timeout', function ($timeout) {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/modal/backdrop.html',
link: function (scope, element, attrs) {
/* ... */
}
};
}])
每当我调用$modal.open()ui-bootstrap为新的模态窗口构建DOM时,angular会尝试通过$http服务解析这些URL,即使模板已经通过$templateCache.put方法或添加<script>标记加载.这基本上是在我的拦截器中引起无限递归,它试图在request上面的url的重载中引入登录对话框.
这是我的拦截器的简化版本:
.config(['$provide', '$httpProvider', function($provide, $httpProvider) {
$provide.factory('testInterceptor', ['$injector', function($injector) {
return {
'request': function(config) {
var auth = $injector.get('authService');
var modal = $injector.get('$modal');
if …angularjs angular-ui angularjs-directive angular-ui-bootstrap angularjs-http
我试图使用ui bootstrap(http://angular-ui.github.io/bootstrap/)做一组单选按钮,与他们网站上的示例几乎相同,但是使用ng-repeat:
<div class="btn-group">
<label ng-repeat='option in options' class="btn btn-danger" ng-model="radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>
但由于某些原因,当我使用ng-repeat时它不起作用.谁知道为什么？
我已经做了一个说明问题的人:http ://plnkr.co/edit/0sDgKoRhHOgfnIvBPmi4?p=preview
谢谢!
我在plunkur有以下示例 点击这里打开链接
var app = angular.module('App', ['ui.bootstrap']);
try {
app.service('loginModalService', function ($modal, $rootScope) {
function assignCurrentUser(user) {
$rootScope.currentUser = user;
return user;
}
return function () {
var instance = $modal.open({
templateUrl: 'loginModalTemplate.html',
controller: 'LoginModalCtrl',
controllerAs: 'LoginModalCtrl',
windowClass: 'vertical-center',
backdrop: true,
backdrop: 'static',
sticky: true
})
return instance.result.then(assignCurrentUser);
};
});
} catch (e) {
alert("Error --- " + e.message);
}
//UsersAPI is service to validate on server
app.controller('LoginModalCtrl', function ($scope, loginModalService) {
this.cancel = $scope.$dismiss;
$scope.showModal = function () { …我正在尝试在指令中打开一个Bootstrap UI $ modal.它可以工作,但是当我想添加一个'内联'控制器(参见下面代码中的注释行)时,我得到一个"[$ injector:unpr]未知提供者:nProvider < - n"错误.
谁能告诉我为什么？
angular.module('myApp.directives').directive('eModalForm', ['$modal', function ($modal) {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
$scope.openModal = function () {
console.log('//==//');
var modalInstance = $modal.open({
templateUrl: '/App/Templates/modal.html',
// commented these lines to prevent error:
//controller: function ($scope, $modalInstance) {
// $scope.$modalInstance = $modalInstance;
//},
size: 'lg'
});
};
}
};
}]);
我这样调用这个函数:
<div ng-repeat="item in list" ng-click="openModal(item)" e-modal-form>
我在这里重新使用了基于角度的旋转木马:http: //codepen.io/hamzaisaac/pen/avaVYK
标记:
<div ng-app="MyApp">
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
控制器:
angular.module('MyApp', ['ui.bootstrap'])
.controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 1000 + slides.length + 1;
slides.push({
image: '//placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' …在这个插件中我有一个Angular UI模态,其z-index大于div z-index,但是div覆盖了模态.如果你单击div,你会看到模态落后.
由于模态的z-index较大,我希望它在div的顶部.怎么解决这个问题？
HTML
<div class="div1" ng-click="hide()" ng-show="show" >
CLICK ME
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header" ng-style="{'z-index': 99000}">
<h4 class="modal-title">The Title</h4>
</div>
SOME TEXT IN THE MODAL
</script>
使用Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {
$scope.show = true;
(function() {
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html'
});
})();
$scope.hide = function(){
$scope.show = false;
};
});
CSS
.div1 {
position: fixed;
z-index: 90000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: blue; …我习惯用plattform-browser-dynamic 2.0.0导入bootstrap,如下所示:
import { bootstrap } from '@angular/platform-browser-dynamic/';
现在我创建新的Projekt并使用角度版本2.2.0 Plattform-browser-dynamic packages具有版本2.2.0:
"@angular/common": "~2.2.0",
"@angular/compiler": "~2.2.0",
"@angular/core": "~2.2.0",
"@angular/forms": "~2.2.0",
"@angular/http": "~2.2.0",
"@angular/platform-browser": "~2.2.0",
"@angular/platform-browser-dynamic": "~2.2.0",
"@angular/router": "~3.2.0",
"@angular/upgrade": "~2.2.0",
"angular-in-memory-web-api": "~0.1.15"
我尝试使用包2.0.0导入bootstrap,但是找不到它.我的代码:
import { bootstrap } from '@angular/platform-browser-dynamic/*';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
错误:
错误TS2305:模块'"../ node_modules/@angular/platform-browser-dynamic/index"'没有导出成员'bootstrap'.
我该如何解决这个问题？我找不到类似的lib.
我有用于按钮的此代码，我想显示禁用按钮的tooptips。这在Firefox和IE中可以正常工作，但在Chrome中不起作用。在Chrome中，只有启用的按钮才会显示工具提示。
<div *ngFor"let btn of buttons">
<button [tooltip]="'Tooltip'" [disabled]="btn.disable">
</div>