sports sports - 5 months ago 61
AngularJS Question

Reuse a view as a modal and non-modal (angularjs + bootstrap-ui)

I currently use

views/foo.html
as a normal view.

Say this view has this:

<p>Hello</p>


Now I want to reuse
views/foo.html
as the content of a modal, but I'd like to wrap it with this:

<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<!-- I want to include views/foo.html in here -->
</div>


So the modal would look like this:

<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<p>Hello</p>
</div>


The modal invoker is the following: (notice the comment)

$scope.openFooModal = function () {

var modalScope = $scope.$new();

var modalInstance = $uibModal.open({
templateUrl: 'views/foo.html', /* HERE I NEED TO WRAP IT */
controller: 'fooController',
scope: modalScope,
size: 'lg'
});

modalInstance.result.then(function (result) {
}, null);
};


What is the best solution?

Should I create a foo2.html ?

Answer

So at the end the comment made by JB Nizet worked as a start, but there was this issue: Inject $uibModalInstance to a controllar not initiated by a $uibModal

This is what I did finally:

view in charge of opening the modal or displaying it as an ng-view:

  <body ng-controller="indexController">
    <ul>
      <li>
        <a href="" ng-click="openModal()">Open as modal</a>
      </li>
      <li>
        <a href="#nonmodal">Open as non modal</a>
      </li>
    </ul>
    <div ng-view=""></div> <!-- Used by routeProvider -->
  </body>

...its controller

angular.module('myApp').controller('indexController', ['$scope','$uibModal', function($scope,$uibModal) {

    $scope.openModal = function () {

        var modalScope = $scope.$new();

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

        modalScope.modalInstance = modalInstance;
             // ^ I'm giving the modal his own reference
             //   using the scope. Injecting wont work on
             //   the non-modal case!

        modalInstance.result.then(function (result) {
        }, null);
    };
}]);

view to be reused as a modal or as a non-modal:

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

its controller:

angular.module('myApp').controller('fooController', ['$scope', function($scope) { 
                                                     // ^ 
                                                     // I'm not injecting
                                                     // uibModalInstance
                                                     // (this is important)


    $scope.name = "John";

    $scope.cancel = function () {
        $scope.modalInstance.dismiss('cancel');
          // ^ I can access the modalInstance by the $scope
    };
}]);

view to be used as a modal (wrapper)

<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> <!-- Credits to JB's comment -->
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Close</button>
</div>

routeProvider

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

Here is a plunkr: https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5?p=info

Comments