我试图让$ uibModalInstance为Angular Bootstrap工作 请参阅plunker http://plnkr.co/OzGgBs
Plunker自述文件有更多细节,但实质上当我注入$ uibModalInstance时,我得到以下错误并且模态没有关闭;
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24uibModalInstanceProvider%20%3C-%20%24uibModalInstance%20%3C-%20GameController
at Error (native)
at http://localhost:1337/js/angular/angular-1.4.5.min.js:6:416
at http://localhost:1337/js/angular/angular-1.4.5.min.js:40:307
at Object.d [as get] (http://localhost:1337/js/angular/angular-1.4.5.min.js:38:308)
at http://localhost:1337/js/angular/angular-1.4.5.min.js:40:381
at d (http://localhost:1337/js/angular/angular-1.4.5.min.js:38:308)
at Object.e [as invoke] (http://localhost:1337/js/angular/angular-1.4.5.min.js:39:64)
at Q.instance (http://localhost:1337/js/angular/angular-1.4.5.min.js:80:151)
at L (http://localhost:1337/js/angular/angular-1.4.5.min.js:61:140)
at g (http://localhost:1337/js/angular/angular-1.4.5.min.js:54:326) <div class="modal-content" uib-modal-transclude="">
答案 0 :(得分:1)
您的代码中存在多个问题。我更正了脚本网址,添加了类型属性。从script.js中删除了容器函数,因此全局访问myApp
实例。已更正分配给关闭按钮的ng-click
函数名称。更正了link
指令的dashboard
函数定义。
<强>的index.html 强>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js" ></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js" ></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="Controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</head>
<body>
<dashboard></dashboard>
</body>
</html>
<强>的script.js 强>
var myApp = angular.module('myApp', ['ui.bootstrap', 'ngRoute', 'ngResource']).
config(['$locationProvider', '$httpProvider', function($locationProvider, $httpProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$httpProvider.defaults.useXDomain = true;
}])
<强> directives.js 强>
//"use strict";
myApp.directive('dashboard', ['$uibModal', function($uibModal) {
return {
restrict: 'E',
transclude: true,
templateUrl: 'dashboard.html',
link: function($scope, element, attrs, modelCtrl) {
$scope.buttonLabel = 'Open Modal';
$scope.openModal = function() {
var modalInstance = $uibModal.open({
animation: false,
templateUrl: 'modal.html',
controller: 'ModalController',
scope: $scope,
size: 'lg'
});
};
}
};
}])
<强> Controllers.js 强>
.controller('ModalController', function($scope, $uibModalInstance) {
$scope.closeModal = function() {
$uibModalInstance.close();
};
});
<强> modal.html 强>
<!DOCTYPE html>
<div>
<div class="modal-body">
Lorem ipsum, blah blah.
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="button" data-ng-click="closeModal()">Close</button>
</div>
</div>
</div>
</div>
现在模态很好。