AngularJS uibModal зависимость не найдена

Я имею проблему с инъекцией uibModal зависимости в моем app.js:AngularJS uibModal зависимость не найдена

Angular Version: 1.5.7
ui.boostrap Version: 1.3.3
Bootstrap Version: 3.3.6

I постоянно получаю эту ошибку:

angular.js:13708 Error: [$injector:unpr] Unknown provider: $uibModal Provider <- $uibModal <- ModalController

App.js:

var app = angular.module('App', ['ui.bootstrap', 'ui.bootstrap.tpls']); 

app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) { 
    $scope.showModal = function() { 
     var modalInstance = $uibModal.open({ 
      animation: true, 
      templateUrl: '../HTML/templates/login-modal.html', 
      controller: 'newModalController', 
      show: true 
     }); 
    }; 
}]); 

app.controller('newModalController', function($scope, $uibModalInstance) { 
    $scope.close = function() { 
     $uibModalInstance.dismiss('close'); 
    }; 
});

index.html:

<html lang="en"> 
    <head> 
     <title>App</title> 
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script> 
    <script src="../resources/js/app.js"></script> 
    </head> 
    <body ng-app="App"> 
     <header> 
      <nav> 
       <div class="row" ng-controller="ModalController"> 
        <img src="../resources/img/logos.png" alt="logo" class="logo"> 
        <ul class="nav-list"> 
         <li><a href="#" class="learn-more-link">Learn More</a></li> 
         <li><a href="#" class="login-button-link" ng-click="showModal()">Take Action</a></li> 
        </ul> 
       </div> 
      </nav> 
     </header> 
    </body> 
</html>

источник

2016-06-26 LP45

Перейти к модальным [документации] (http://angular-ui.github.io/bootstrap/#/modal) нажмите на ** Правка в plunker ** кнопку, и вы сможете увидеть код рабочего примера. Затем сравните рабочий пример с вашим и посмотрите, что вы делаете. –

@Alon Благодарим вас за совет. Я внимательно рассмотрел этот пример, и я нашел ошибку! – LP45

Кроме того, необходимо UI-самозагрузки-ВДУ для покадрово.

источник

2016-06-26 21:36:16 mokarakaya

отлично! он должен работать, когда вы добавляете его в angular.module – mokarakaya

вы можете добавить его так же, как вы добавляете ui.bootstrap – mokarakaya

Итак, вот что я добавил: 'var app = angular.module ('App', ['ui.bootstrap' , 'ui.bootstrap.tpls']); 'И ошибка все еще не исчезла :( – LP45

Прежде всего, у вас есть два контроллера, делающих то же самое. Когда вы можете просто иметь один, но в этом случае проблема не только в плохом дизайне.

пытаются переписывать первый контроллер так что вместо этого

app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {

сделать это:

app.controller('ModalController', function ($scope, $uibModal) {

не забудьте, чтобы удалить ']' в конце контроллера

надеюсь это поможет !

источник

2016-06-26 22:01:36 Sam

Здравствуйте, спасибо за помощь! Мне удалось заставить его работать. В моем index.html вам не нужно включать ui.boostrap cdn только в ui.bootstrap.tpls. Это мои импортные '' '' '' '' – LP45

Для тех, кто нуждается в помощи с этим, используя версии:

Angular Version: 1.5.7
Angular Animate: 1.5.7
ui.boostrap-tpls Version: 1.3.3
Bootstrap Version: 3.3.6

в основной index.html включают скрипты. Вам нужно только angular, angular-animate, ui.boot-tpls, and bootstrap:

<html lang="en"> 
    <head> 
     <title>App</title> 
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <script src="../vendors/js/angular.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script> 
     <script src="../vendors/js/ui-bootstrap-tpls-1.3.3.min.js"></script> 
     <script src="../resources/js/app.js"></script> 
    </head> 
    <body> 
    ... 
    </body> 
</html>

источник

2016-06-26 22:07:18 LP45

вы правы! – Sam

AngularJS uibModal зависимость не найдена

ответ

Смежные вопросы