未知提供程序:$uibModalInstanceProvider - Bootstrap UI 模式 [英] Unknown provider: $uibModalInstanceProvider - Bootstrap UI modal

问题描述

我在使用 UI Bootstrap 模式时遇到问题.

在一个控制器中，我有这个:

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {$scope.open = function (size,selectedUser) {var modalInstance = $uibModal.open({动画:$scope.animationsEnabled，templateUrl: 'myModalContent.html',控制器:'ModalInstanceCtrl'，尺寸:尺寸，解决: {用户:函数(){返回选定的用户；}}});}]);

在另一个我有这个:

app.controller('ModalInstanceCtrl',['$scope','$uibModalInstance','user', function ($scope, $uibModalInstance, user) {$scope.user = 用户；$scope.ok = 函数 () {$uibModalInstance.close();};}]);

myModalContent 看起来像这样:

我只在 HTML 中调用 tableCtrl 并像这样调用 open 函数:

编辑

当我单击编辑按钮时，我收到此异常:

未知提供者:$uibModalInstanceProvider <- $uibModalInstance

我看到了这个plunker，但对我没有帮助.

怎么了?

解决方案

我遇到了同样的问题，所以从我的解决方案中，您可以如何解决您的方案

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {$scope.open = function (size,selectedUser) {var uibModalInstance = $uibModal.open({动画:$scope.animationsEnabled，templateUrl: 'myModalContent.html',控制器:函数($uibModalInstance ，$scope，用户){$scope.ok = 函数 () {$uibModalInstance.dismiss('cancel');};},尺寸:尺寸，解决: {用户:函数(){返回选定的用户；}}});}]);

I have a problem with UI Bootstrap modal.

In one controller I have this:

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {
  $scope.open = function (size,selectedUser) {
  var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'myModalContent.html',
    controller:'ModalInstanceCtrl',
    size: size,
    resolve: {
      user: function () {
        return selectedUser;
      }
    }
  });
}]);

In another I have this:

app.controller('ModalInstanceCtrl',['$scope','$uibModalInstance','user', function ($scope, $uibModalInstance, user) {
  $scope.user = user;
  $scope.ok = function () {
    $uibModalInstance.close();
  };
}]);

myModalContent looks like this:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header"><h1>EDIT</h1></div>
    <div class="modal-body"> 
        {{patient.patient_id}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
    </div>
</script>

I only call tableCtrl in HTML and call open function like this:

<button class="btn btn-primary" ng-click="open('lg',patient)">Edit</button>

When I click the edit button I receive this exception:

Unknown provider: $uibModalInstanceProvider <- $uibModalInstance

I saw this plunker but it didnt help me.

What is wrong?

解决方案

I had the same problem, so from my solution here's how you could solve your scenario

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {
  $scope.open = function (size,selectedUser) {
  var uibModalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'myModalContent.html',
    controller:function($uibModalInstance ,$scope,user){
     $scope.ok = function () {
            $uibModalInstance.dismiss('cancel');
         };

    },
    size: size,
    resolve: {
      user: function () {
        return selectedUser;
      }
    }
  });
}]);

这篇关于未知提供程序:$uibModalInstanceProvider - Bootstrap UI 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！