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

Mar*_*nek 15 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;
      }
    }
  });
}]);
Run Code Online (Sandbox Code Playgroud)

在另一个我有这个:

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

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>
Run Code Online (Sandbox Code Playgroud)

我只调用tableCtrlHTML并调用open函数如下:

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

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

Unknown provider: $uibModalInstanceProvider <- $uibModalInstance
Run Code Online (Sandbox Code Playgroud)

我看到了这个傻瓜,但它没有帮助我.

怎么了?

小智 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;
      }
    }
  });
}]);
Run Code Online (Sandbox Code Playgroud)

  • 解释正在发生的事情,而不仅仅是代码,会很好 (8认同)

小智 5

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


Moh*_*ian 3

我有同样的问题。更新 Angular 和 ui-bootstap 库解决了我的问题。使用 Bower 更新 ui-bootstrap,它会建议与其配合使用的 Angular 版本。希望我有所帮助。

  • 我对“angular-bootstrap”的“0.14.1”版本有同样的问题。我更新到“0.14.3”,现在可以使用了。 (2认同)