AngularJS错误:$injector:unp未知提供程序-$modalInstanceProvider

AngularJS Error: $injector:unpr Unknown Provider - $modalInstanceProvider

本文关键字：程序 modalInstanceProvider unp 错误 injector AngularJS 未知      更新时间：2023-09-26

我有一个你点击的按钮，它应该打开一个模态onclick。但是，当我单击按钮时，我会得到错误"未知提供程序：$modalInstanceProvider<-$modalInstance"。到目前为止，我检查了所有的东西。我错过了什么？这是迄今为止的代码。

应用程序。js-加载ui引导程序。

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>

使用$uibModalInstance而不是$modalInstance

您应该使用$uibModalInstance而不是$modalInstance。

同样，在html中，您放置了ng-controller="Home"，在js文件中，您将控制器声明为home，因此需要修复此问题，以便名称匹配。

相关文章：