我正在使用here中的angular ui-bootsrap模式
当我单击Open me按钮时，我什么也没得到。弹出窗口不显示。我的代码可以在下面找到。
app.js
(function () {
'use strict';
angular.module('probaApp', ['ui.router','ngAnimate','ui.bootstrap','ui.bootstrap.modal'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'src/home.tpl.html',
controller: 'modalController'
})
});
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="probaApp">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<title></title>
</head>
<body>
<ui-view></ui-view>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="src/app.js"></script>
<script src="src/modal-controller.js"></script>
<script src="src/modal-instance-controller.js"></script>
</body>
</html>
modal-controller.js
(function () {
'use strict';
function ModalController($scope,$modal,$log) {
$scope.modalController = {};
$scope.modalController.items = ['item1', 'item2', 'item3'];
$scope.modalController.animationsEnabled = true;
$scope.modalController.open = function(size){
$scope.modalController.modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'modalInstanceController',
size: size,
resolve: {
items: function () {
return $scope.modalController.items;
}
}
});
$scope.modalController.result.then(function (selectedItem){
$scope.modalController.selected = selectedItem;
},function(){
$log.info("Modal dismissed at: " + new Date());
});
};
$scope.modalController.toggleAnimation = function(){
$scope.modalController.animationsEnabled = !$scope.modalController.animationsEnabled;
};
}
angular.module('probaApp').controller('modalController', ModalController);
})();
模态实例控制器
/**
* Created by user on 19.09.2015.
*/
(function(){
function ModalInstanceController ($scope,$modalInstance,items){
$scope.modalInstanceController = {};
$scope.modalInstanceController.items = items;
$scope.modalInstanceController.selected = {
item: $scope.items[0]
};
$scope.modalInstanceController.ok = function(){
$modalInstance.close($scope.modalInstanceController.selected.item);
};
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
}
}
angular.module('probaApp').controller('modalInstanceController',ModalInstanceController);
})();
home.tpl
<div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="modalController.open()">Open me!</button>
</div>
疯狂编辑
TypeError: Cannot read property 'then' of undefined
at Object.ModalController.$scope.modalController.open (http://localhost:63342/Proba/src/modal-controller.js:26:42)
at fn (eval at <anonymous> (http://localhost:63342/Proba/bower_components/angular/angular.js:13275:15), <anonymous>:4:293)
at callback (http://localhost:63342/Proba/bower_components/angular/angular.js:23481:17)
at Scope.$eval (http://localhost:63342/Proba/bower_components/angular/angular.js:15922:28)
at Scope.$apply (http://localhost:63342/Proba/bower_components/angular/angular.js:16022:25)
at HTMLButtonElement.<anonymous> (http://localhost:63342/Proba/bower_components/angular/angular.js:23486:23)
at HTMLButtonElement.eventHandler (http://localhost:63342/Proba/bower_components/angular/angular.js:3296:21)(anonymous function) @ angular.js:12450(anonymous function) @ angular.js:9237Scope.$apply @ angular.js:16027(anonymous function) @ angular.js:23486eventHandler @ angular.js:3296
angular.js:12450 TypeError: Cannot read property '0' of undefined
at new ModalInstanceController (modal-instance-controller.js:12)
at invoke (angular.js:4476)
at Object.instantiate (angular.js:4484)
at angular.js:9142
at resolveSuccess (ui-bootstrap-tpls.js:2983)
at processQueue (angular.js:14678)
at angular.js:14694
at Scope.$eval (angular.js:15922)
at Scope.$digest (angular.js:15733)
at Scope.$apply (angular.js:16030)
最佳答案
这是因为您正在做的“ $ scope.modalController.result ...”不存在。
您需要执行“ $ scope.modalController.modalInstance.result.then ...”
另外，我不确定为什么要引入“ modalController”作用域变量？不需要它，只会增加混乱。
关于javascript - 使用ui-bootstrap模态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32662125/