$uibModal 没有打开，给出错误答案

【问题标题】：$uibModal not opening, giving errors$uibModal 没有打开，给出错误
【发布时间】：2015-11-30 22:25:58
【问题描述】：

所以我什么都试过了，每个例子，我完全不知道出了什么问题。每当我尝试加载 '$uibModal' 时，我都会遇到错误，并且我的所有角度代码都会中断。如果我没有正确加载它，那么我会收到 $uibModal.open 错误。这是我的代码。我现在的版本是0.14.3，今天刚下载的文件。如果重要的话，我的 Angular 应用程序在 rails 中，我使用 bower 导入所有内容。

我在 js 中加载的 app.js 文件。

var app = angular.module('planoxApp',
['ui.router', 
'nya.bootstrap.select',  // bootstrap select
'ngAnimate',
'ui.bootstrap', 
'main-directives',    
'templates',  
'color.picker', 
'xeditable',   
'restangular',   
'ngDragDrop', 
'angularFileUpload',
'ngStorage'  

// 'mgcrea.ngStrap',
// 'mgcrea.ngStrap.typeahead',
// 'mgcrea.ngStrap.tooltip',
// 'mgcrea.ngStrap.helpers.parseOptions',

])

ctrl加载区，这个会报错

[$injector:unpr] 未知提供者：$uibModalProvider

app.controller('PhotoplanCtrl',['$http','$scope','$stateParams','$filter','$uibModal','$log',
function($http,$scope, $stateParams,$filter,$uibModal,$log){

但如果我也改变它

 app.controller('PhotoplanCtrl',['$http','$scope','$stateParams','$filter','$log',
function($http,$scope, $stateParams,$filter,$uibModal,$log){

错误消失了，取而代之的是，错误：$uibModal.open 不是函数。（在'$uibModal.open'中，'$uibModal.open'未定义）

这是模态代码

 var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'templates/photoplan/ModalPublish.html',
    controller: 'ModalPublishCtrl'
});

如果有人知道出了什么问题，我们非常感谢任何帮助。

【问题讨论】：

这似乎有效：plnkr.co/edit/MdQirCdgrkrUYjybtjRo?p=preview
您确定 ui.bootstrap 已加载到您的 index.html 中吗？第二个错误是红鲱鱼。因为你从依赖数组中删除了 $uibModal，Angular 实际上是在你的代码期望 $uibModal 的地方注入 $log。
所以我要在下面做一个更详细的评论。但 JC 走在正确的轨道上。我使用了 Andy W plunker 中的链接，并将它们插入到 application.html.erb 文件中，基本上是 index.html，现在它可以工作了。所以很明显它没有正确加载到 index.html 文件中。我认为它可能会在引导之前加载。所以我要重新审视然后发表后续评论/答案
您还可以检查您的原始视图 (html) 是否引用了您的第二个控制器 (ModalPublishCtrl)。它不应该需要，因为它在您的 $uibModal.open 函数中被引用。在此处查看类似的问题和解决方案：stackoverflow.com/a/33980575/1303740

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

好的，首先，在我的模态 html 中你不能有 ng-controller。显然引导程序处理它，所以我的新 html 看起来像。

<div class="modal-header" >
            <h3 class="modal-title">Account Settings</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li>
                  <p>An option to chage password and account username </p>
                  <p>An option to change time settings </p>
                  <p> </p>
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" type="button" ng-click="cancel()">Close</button>
        </div>

此外，由于某种原因，它在我的 Rails 管道或 Angular 中都没有正确加载，这很奇怪。我可能会在 github 上报告那个问题，但否则我只是将 CDN 添加到我的 index.html 文件中，它就开始正常工作了。

【讨论】：