未知提供者:$ uibModalInstanceProvider - Bootstrap UI模式

时间:2015-10-31 18:44:53

标签: javascript angularjs angular-ui-bootstrap

我的UI Bootstrap模式有问题。

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

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;
      }
    }
  });
}]);

在另一个我有这个:

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

myModalContent看起来像这样:

<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>

我只在HTML中调用tableCtrl并调用open函数,如下所示:

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

当我点击编辑按钮时,我收到此例外:

Unknown provider: $uibModalInstanceProvider <- $uibModalInstance

我看到this plunker但它没有帮助我。

有什么问题?

6 个答案:

答案 0 :(得分:20)

我遇到了同样的问题,所以从我的解决方案来看,你可以如何解决你的问题

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;
      }
    }
  });
}]);

答案 1 :(得分:5)

标识的问题是:我的控件正在从HTML页面重新初始化。确保模态控制器从一个地方开始

答案 2 :(得分:3)

我有同样的问题。更新angular和ui-bootstap库修复了我的问题。使用bower更新ui-bootstrap,它建议使用它的角度版本。希望我帮忙。

答案 3 :(得分:1)

拥有控制器功能,内联和uibModalInstance对象定义内部导致了同样的问题。

升级到0.14.3后,当javascript被uglified时,uibModalInstance正在抛出未知的提供者。使用&#39; app.controller&#39;定义控制器,修复了问题。

答案 4 :(得分:1)

我发现当我在模板HTML中而不是在modal.open调用中定义控制器时发生了这个问题

答案 5 :(得分:1)

angular-ui / boostrap的不同版本具有不同的injecter变量名称。

查看angular-ui/bootstrap example.