javascript angular ui 错误：$modal.open 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21790994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular ui error: $modal.open is not a function
提问by awmcreative
I'm trying to get a modal to appear using Angular-UI v0.10.0 (http://angular-ui.github.io/bootstrap/) and Angular 1.1.5 and I receive the following error:
我正在尝试使用 Angular-UI v0.10.0 ( http://angular-ui.github.io/bootstrap/) 和 Angular 1.1.5来显示模式，但收到以下错误：
Error: $modal.open is not a function
错误：$modal.open 不是函数
I'm not sure or why I'm getting this error. Here's what I have...
我不确定或为什么会收到此错误。这是我所拥有的...
HTML:
HTML：
<div ng-controller="ModalDemoCtrl">
<button class="btn btn-default btn-sm" ng-click="open()">open me</button>
</div>
JS:
JS：
app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'template.html',
controller: 'ModalInstanceCtrl',
resolve: {}
});
};
}]);
app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I'm just trying to get the basics down first...like getting it to open. I've pretty much exhausted me resources, so any help would be greatly appreciated! Thanks!
我只是想先了解一下基础知识……就像打开它一样。我已经用尽了我的资源，所以任何帮助将不胜感激！谢谢！
回答by awmcreative
I fixed the problem.
我解决了这个问题。
Apparently, I had angular-strap beneath angular-ui, which was overwriting the angular-ui. Both scripts were obviously in conflict with one another.
显然，我在 angular-ui 下面有 angular-strap，它覆盖了 angular-ui。两个脚本显然相互冲突。
The app I'm working on is complicated, so this was easy to overlook. However, word of advice, stick with one library and keep things simple.
我正在开发的应用程序很复杂，因此很容易被忽略。但是，忠告，坚持使用一个库并保持简单。
Thanks everyone!
感谢大家！
回答by vineet
This problem occur due to different version of angular-modaland angularjs. I had faced same problem in angular-modalv.0.5and got a solution i.e,
由于angular-modal和 angularjs 的版本不同，会出现此问题。我在angular-modalv.0.5 中遇到了同样的问题并得到了解决方案，即，
use:
利用：
$modal({......});
Instead of:
代替：
$modal.open({......});
For example:-
例如：-
var termAndConModal = $modal({
title: 'Info',
controllerAs: 'termAndConModalController',
template: '../views/partials/term_n_cond_modal.html',//;myModalContent.html',
show: false
});
$scope.showtermAndConModal = function() {
termAndConModal.$promise.then(termAndConModal.show);
};
$scope.showtermAndConModal();
回答by Chen-Tsu Lin
This error cause by including $modal unsuccess.
这个错误是由包含 $modal 失败引起的。
Make sure:
确保：
add source link between your angular.js & yourapp.js
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script> <script src="assets/js/ui-bootstrap-tpls-0.10.0.min.js"></script> <script src="assets/js/yourapp.js"></script>add ui.bootstrap to the module
app = angular.module('yourApp', ['ui.bootstrap']);add $modal independency to your controller
app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {}]);
在 angular.js 和 yourapp.js 之间添加源链接
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script> <script src="assets/js/ui-bootstrap-tpls-0.10.0.min.js"></script> <script src="assets/js/yourapp.js"></script>将 ui.bootstrap 添加到模块
app = angular.module('yourApp', ['ui.bootstrap']);将 $modal 独立性添加到您的控制器
app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {}]);
回答by john west
Where is your ng-app? You have to have an app referenced that in turn includes ui.bootstrap.
你的 ng-app 在哪里？您必须引用一个包含 ui.bootstrap 的应用程序。
See the plunkr below.
请参阅下面的plunkr。
http://plnkr.co/edit/?p=preview
http://plnkr.co/edit/?p=preview
If you have that and just aren't showing it, another thing to try is using the latest version of angular. 1.1.5 is pretty old.
如果你有它，只是没有显示它，另一件要尝试的事情是使用最新版本的 angular。1.1.5 已经很老了。
