2

У меня есть кнопка, которую вы нажимаете, и она должна открывать модальный onclick. Однако, когда я нажимаю кнопку, я получаю сообщение об ошибке «Неизвестный поставщик: $ modalInstanceProvider < - $ modalInstance». Я все проверил до сих пор. Что мне не хватает? Вот код до сих пор.

приложение. js - загрузка ui-bootstrap.

var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap']); 

services.js - Это модальное обслуживание.

app.factory('modalService',['$uibModal', function($uibModal){ 
return { 
    openMenuModal: function(index, title, description) { 
    var modalObj = $uibModal.open({ 
     templateUrl: 'partials/modal.html', 
     backdrop: 'static', 
     keyboard: true, 
     size: 'sm', 
     controller: function($scope, $modalInstance){ 
     $scope.title = title; 
     $scope.description = description; 

     $scope.ok = function(id){ 
      $modalInstance.close(); 
     } 
     $scope.cancel = function(){ 
      $modalInstance.dismiss('cancel'); 
     } 
     } 
    }); 
    } 
}; 
}]); 

Главной Контроллер

app.controller('home', [ 
'$scope', 
'contentService', 
'$http', 
'$uibModal', 
'modalService', function($scope, contentService, $http, $uibModal, modalService){ 

contentService.then(function(data){ 
    $scope.data = data; 
    $scope.shortcutList = $scope.data.shortcuts; // list of shortcuts 
    $scope.name = $scope.data.user;    // user's name 
    $scope.userThumb = $scope.data.userThumb;  // user thumbnail image 


    $scope.deleteBox = function(index, title, description){ 
     modalService.openMenuModal('t', title, description); 
    }; 
}); 

}]); 

шаблон модальной кнопки шаблона

<div ng-controller="Home"> 
    <div class="modalBox animated fadeIn"> 
    <h1> {{title}} </h1> 
     <p>{{description}}</p> 
     <div class="modal-footer"></div>  
</div> 
</div> 

ярлыка - Здесь я хочу вызвать deleteBox()

<button class="btn btn-primary deleteBox" ng-click="deleteBox($index, 'Are You sure you want to delete this?', 'description text')"></button> 
+0

Вы можете отметить ответ правильный, пожалуйста, так что люди знают, что устранили эту проблему =) – sebenalern

ответ

1

Вы должны использовать $ uibModalInstance вместо $ modalInstance.

Также в вашем html вы положили ng-controller="Home", а в файл js вы указали контроллер как home, поэтому вам нужно исправить это, чтобы имена совпадали.

+0

Спасибо. Я бы не заметил ошибку «дома». Я вставил '$ uibModalInstance', и теперь я получаю« Access Restricted to URI denied ». – LadyT

+0

Nevermind. Я починил это. Я не загружал правильный cdn. Все остальное отлично поработало. Благодаря! – LadyT

+0

в порядке! Рад слышать! – sebenalern

2

Использования $uibModalInstance ин tead $modalInstance

+0

нет ничего, как указано $ modalInstance в https://angular-ui.github.io/bootstrap/ , а док говорит 'controller (Тип: function | string | array, Example: MyModalController) -... Имеет специальный $ uibModalInstance для инъекции для доступа к модальному экземпляру. ' – devbd

+0

Да, это сработало отлично! Спасибо за вашу помощь. Я также изменил свой cdn на версию, которая включала шаблоны, и она отлично работала. – LadyT

+0

Я ожидал, что мой ответ верен? неважно, что происходит:) – devbd

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