将 $uibModalInstance 注入不是由 $uibModal 启动的控件

foo

关注

发信

关注(28)粉丝(399)

将 $uibModalInstance 注入不是由 $uibModal 启动的控件

本文介绍了将 $uibModalInstance 注入不是由 $uibModal 启动的控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这两种观点:

1) foo.html

 <p>Hello {{name}}</p>

2) foo-as-modal.html


<h3 class="modal-title">我是模态</h3>
<div class="modal-body"><ng-include src="'foo.html'"></ng-include>

<div class="modal-footer"><button class="btn btn-default" ng-click="cancel()">关闭</button>

foo.html 的控制器是 fooController:

angular.module('myApp').controller('fooController', ['$scope','$uibModalInstance', function($scope,$uibModalInstance) {$scope.name = "约翰"$scope.cancel = 函数 () {$uibModalInstance.dismiss('cancel');};}]);

我需要将 $uibModalInstance 注入 fooController 以使 .dismiss 工作

当我将 foo-as-modal.html 作为模态调用时效果很好，即:

 var modalInstance = $uibModal.open({templateUrl: 'foo-as-modal.html',控制器:'fooController'，范围:$scope.$new(),尺寸:'lg'});

但是当我将 foo.html 作为普通视图(通过 $routeProvider 和 ng-view 指令)调用时它会抛出错误，即:

 .when('/foo', {templateUrl: 'foo.html',控制器:'fooController'})

错误是:

 错误:[$injector:unpr] 未知提供者:$uibModalInstanceProvider

并且视图不显示John"(因为错误)

我该如何解决这个问题?我真的需要重用 foo.html 和 fooController 作为模态和非模态，因为它们有很多东西(我在这里简化了)

这是一个plunkr:

https://plnkr.co/edit/9rfHtE0PHXPhC5Kcyb7P

解决方案

我是这样解决的:

从 fooController

 中移除注入 $uibModalInstance在调用模态时，我将 modalInstance 作为变量传递给模态的作用域:
var modalScope = $scope.$new();var modalInstance = $uibModal.open({templateUrl: 'foo-as-modal.html',控制器:'fooController'，范围:模态范围});modalScope.modalInstance = modalInstance;
使用范围变量关闭模态:
$scope.modalInstance.dismiss('cancel');//而不是 $uibModalInstance.dismiss(..)

这是原始 plunkr 的一个分支，使用此解决方案:https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5

I have these two views:

1) foo.html

  <p>Hello {{name}}</p>

2) foo-as-modal.html

<div class="modal-header">
    <h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
    <ng-include src="'foo.html'"></ng-include>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Close</button>
</div>

The controller for foo.html is fooController:

angular.module('myApp').controller('fooController', ['$scope','$uibModalInstance', function($scope,$uibModalInstance) {

     $scope.name = "John"

     $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
     };
}]);

I need to inject $uibModalInstance to fooController for the .dismiss to work

That works great when I invoke foo-as-modal.html as a modal, ie:

    var modalInstance = $uibModal.open({
        templateUrl: 'foo-as-modal.html',
        controller: 'fooController',
        scope: $scope.$new(),
        size: 'lg'
    });

But it throws error when I invoke foo.html as a normal view (via $routeProvider and ng-view directive), ie:

    .when('/foo', {
        templateUrl: 'foo.html',
        controller: 'fooController'
    })

Error is:

 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- fooController

And the view doesn't display "John" (because of the error)

How can I solve this? I really NEED to reuse foo.html and fooController as a modal and non-modal, because they have lots of stuff (I've simplified here)

EDIT:Here is a plunkr:

https://plnkr.co/edit/9rfHtE0PHXPhC5Kcyb7P

解决方案

Well I solved this way:

Removed the injection $uibModalInstance from fooController

When invoking the modal, I pass the modalInstance as a variable to the modal's scope:

var modalScope = $scope.$new();

var modalInstance = $uibModal.open({
    templateUrl: 'foo-as-modal.html',
    controller: 'fooController',
    scope: modalScope
});

modalScope.modalInstance = modalInstance;

Dismiss the modal with the scope variable:

$scope.modalInstance.dismiss('cancel');  // instead of $uibModalInstance.dismiss(..)

Here is a fork of the original plunkr, with this solution: https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5

                        这篇关于将 $uibModalInstance 注入不是由 $uibModal 启动的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

11-01 20:59