angularjs – 将$uibModalInstance注入不由$uibModal启动的控制

发布时间：2020-12-17 07:57:06 所属栏目：安全来源：网络整理

导读：我有这两种观点： 1)foo.html pHello {{name}}/p 2)foo-as-modal.html div class="modal-header" h3 class="modal-title"I'm a modal/h3/divdiv class="modal-body" ng-include src="'foo.html'"/ng-include/divdiv class="modal-footer" button class="btn

我有这两种观点：

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>

foo.html的控制器是fooController：

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

     $scope.name = "John"

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

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

当我调用foo-as-modal.html作为模态时,这很有效,即：

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

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

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

错误是：

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

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

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

编辑：
这是一个傻瓜：

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

我解决了这个问题：

>从fooController中删除了注入$uibModalInstance
>调用模态时,我将modalInstance作为变量传递给模态的范围：

var modalScope = $scope.$new();

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

modalScope.modalInstance = modalInstance;

>使用范围变量关闭模态：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!