Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

angularjs - Inject $uibModalInstance to a controllar not initiated by a $uibModal

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Well I solved this way:

  1. Removed the injection $uibModalInstance from fooController
  2. 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;
    
  3. 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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...