Javascript 角度ui引导映射多对话框模式
我试图在我的主页上添加多个对话框模态，但我可能做错了什么 我已经下载了这个plunker预览： 但我有这个控制台的错误，“错误：[ng:areq]参数'addManagerModal'不是一个函数，在添加ui引导和angular后未定义。” 代码看起来很简单，但不起作用： HTML:Javascript 角度ui引导映射多对话框模式,javascript,angularjs,modal-dialog,angular-ui-bootstrap,Javascript,Angularjs,Modal Dialog,Angular Ui Bootstrap,我试图在我的主页上添加多个对话框模态，但我可能做错了什么 我已经下载了这个plunker预览： 但我有这个控制台的错误，“错误：[ng:areq]参数'addManagerModal'不是一个函数，在添加ui引导和angular后未定义。” 代码看起来很简单，但不起作用： HTML: <!DOCTYPE html> <html ng-app='modalviews'> <head> <title> My app title</tit
<!DOCTYPE html>
<html ng-app='modalviews'>
<head>
<title> My app title</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
</head>
<body>
<div class="span12" style="background-color:">
<div class="span2 nav1" style="background-color:#EFEFEF">
<ul style="padding:45px 0px 10px 5px">
<div ng-controller="addManagerModal">
<script type="text/ng-template" id="addManager.html">
<div class="modal-header">
<h3>I'm a modal!'</h3>
</div>
<div class="modal-body">
hii this is manager
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<a ng-click="open()">Add Manager</a>
</div>
<div ng-controller="addCaptainModal">
<script type="text/ng-template" id="addCaptain.html">
<div class="modal-header">
<h3>I'm a modal!'</h3>
</div>
<div class="modal-body">
hii this is captain
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<a ng-click="open()">Add Captain</a>
</div>
</ul>
</div>
</div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="modal.js"></script>
</body>
</html>
angular.module('modalviews', ['ui.bootstrap']);
// add manager Modal
var addManagerModal = function($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'addManager.html',
controller: ModalInstanceCtrl});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
//add Captain modal
var addCaptainModal = function($scope, $modal) {
$scope.open = function () {
var captainModalInstance = $modal.open({
templateUrl: 'addCaptain.html',
controller: captainModalInstanceCtrl});
};
};
var captainModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
我希望有人能帮助我。我想你需要添加这些控制器，而不是仅仅使用角度变量
angular.module('modalviews')
.controller('addManagerModal', function($scope, $modal) {
...
}
'use strict';
angular.module('weShareApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('weShareApp').controller('loginModalCtrl', function ($scope, $uibModal, $log) {
$scope.items = [];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'loginModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
angular.module('weShareApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});