标签: ui.bootstrap
使用controllerAs语法时,将当前范围传递给modalInstance
我正在使用controllerAs语法来避免我的控制器中的$ scope汤,并且还使用ui.bootstrap来呈现模态视图.
我需要打开一个与当前控制器共享相同范围的modalInstace.注入示波器时,您可能会执行以下操作:
var modalInstance = $uibModal.open({
templateUrl: 'addEditModal.html',
scope: $scope
});
但是,由于我没有注入范围,并且使用controllerAs语法,因此无效.
根据我的发现,您需要使用resolve来传递数据,但您必须通过函数显式传递它.有没有办法通过整个范围？
我需要在该模态中执行一些操作,并且传递大量数据似乎有点过分.
不想这样做,因为它看起来很乱......
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
user: function() {
return vm.user;
},
something: function() {
return vm.something;
},
blah: function() {
return blah;
}
}
});
有更好的想法吗？
javascript twitter-bootstrap angularjs bootstrap-modal ui.bootstrap
推荐指数
解决办法
查看次数
ngAnimate和ui.bootstrap模式有什么问题？
在这个例子中
http://plnkr.co/edit/ETwexjK0HRu3b8WovoJq
angular.module('animateApp', [
'ngAnimate', // adding this causes issue with modal backdrop
'ui.bootstrap'
])
关闭模态时,背景不会消失.如果我注释掉'ngAnimate'依赖项(script.js第4行),它就可以了.
我做错了什么,或者当与ngAnimate一起使用时,这是ui.bootstrap中的错误吗？
推荐指数
解决办法
查看次数
angular ui bootstrap不加载
我从示例页面中获取所有内容.基本上没有什么不同,控制器和html正文是来自手风琴示例的纯复制粘贴来自 https://angular-ui.github.io/bootstrap/
我尝试了一切....
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- CSS files -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<!-- JS libs -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>
<!-- Application -->
<script>
var app = angular.module('app',['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items …twitter-bootstrap angularjs angular-ui-bootstrap ui.bootstrap
推荐指数
解决办法
查看次数
角度模态未关闭($ uibModal)
angular
.module('angProj')
.controller('UserCtrl',
['$scope', '$uibModal',
function ($scope, $uibModal) {
$scope.results = function (content, completed) {
var modalInstance = $uibModal.open({
backdrop: 'static',
keyboard: false,
animation: $scope.animationsEnabled,
templateUrl: '/Scripts/angularApp/views/user-modal.html',
controller: 'UserModalCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
if (!completed || content.length === 0) {
return;
}
modalInstance.close();
modalInstance.dismiss('cancel');
我无法关闭用户添加完成的模型..在用户模式我显示进度条..代码运行正常没有错误但模式保持打开.我也试过$ uibModalInstance但是控制器抛出错误:未知的提供程序(无法在同一个UserCtrl上注入$ uibModalInstance)我正在注入ui.bootstrap(ui-bootstrap-tpls-1.1.2.js)
谢谢你的时间.
推荐指数
解决办法
查看次数
UI Bootstrap 选项卡在重新加载后保存活动选项卡
我需要在页面重新加载后显示活动选项卡。我发现我需要将活动选项卡名称存储到会话或本地存储中。但对我来说这不起作用。这是 html
<uib-tabset>
<uib-tab active="active" ng-init="isActive = isActiveTab('Info', $index)" index="0" data-toggle="tab" href="#sectionInfo"
heading="Info" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
<uib-tab active="active" ng-init="isActive = isActiveTab('Info 2',$index)" index="1" data-toggle="tab" href="#sectionInfoTwo"
heading="Info 2" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
</uib-tabset>
这是控制器
// Save active tab to localStorage
$scope.setActiveTab = function (activeTab) {
sessionStorage.setItem("activeTab", activeTab);
};
// Get active tab from localStorage
$scope.getActiveTab = function () {
return sessionStorage.getItem("activeTab");
};
// Check if current tab is active
$scope.isActiveTab = function (tabName, index) {
var activeTab = $scope.getActiveTab();
return (activeTab === tabName || …推荐指数
解决办法
查看次数
错误:无法找到指令'slide'所需的控制器'carousel'
摘要:
每当我尝试使用data-slide中HTML DOM,我在我的js控制台中得到这个错误:
错误:[$ compile:ctreq]无法找到指令'slide'所需的控制器'carousel'!
我用bootstrap和angularjs创建了一个应用程序.我已经添加了这个库<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>.
我ui.bootstrap在创建应用程序时将其作为依赖项包含在内.
整个错误:
Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.4.10/$compile/ctreq?p0=carousel&p1=slide
at angular.js:68
at getControllers (angular.js:8432)
at nodeLinkFn (angular.js:8570)
at angular.js:8810
at processQueue (angular.js:15097)
at angular.js:15113
at Scope.$eval (angular.js:16359)
at Scope.$digest (angular.js:16175)
at Scope.$apply (angular.js:16467)
at done (angular.js:10852)
模板的相关部分:
<div id="carousel-example-generic" class="carousel" data-ride="carousel" data-interval="false">
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" …推荐指数
解决办法
查看次数
标签 统计
angularjs ×6
ui.bootstrap ×6
javascript ×2
carousel ×1
jquery ×1
modal-dialog ×1
ng-animate ×1