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

Question

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 ?

Use ngInclude (https://docs.angularjs.org/api/ng/directive/ngInclude), or make a directive out of your shared html template, and use the directive in your main page template and in your modal template. — JB Nizet, Jun 05 '16 at 08:19
It worked. Post it as an answer if you want me to accept it as an answer. `
My Modal
` — sports, Jun 10 '16 at 18:12

score 0 · Accepted Answer · edited May 23 '17 at 12:09

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

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

My Modal

1 Answers1