CODEWITHSUNDEEP
javascriptangularjsangular-strap
Navid_pdp11
Navid_pdp11

Reputation: 4032

how to change templateUrl of angularbootstrap modal dynamically?

I am using angularstrap for UI Components in my SPA website. I have a modal witch I create it dynamically such as this code: 

$scope.modal = $modal(
             { controller: "testCtrl",
               show : false,
               placement : top 
             });

and I have couple button such as this : 

<button type="button" ng-click="setTemplate(1)" ></button>
<button type="button" ng-click="setTemplate(2)" ></button>

and in my controller I have this function: 

$scope.setTemplate = function (val){
      if (val == 1){
         $scope.modal.templateUrl ="path/to/firsttemp.html" ; 
      }else if (val== 2){
         $scope.modal.templateUrl ="path/to/secondtemp.html" ; 
      }
}

now when I click on each button my modal is empty.

Upvotes: 0

Views: 1740

Answers (1)

Fracedo
Fracedo

Reputation: 626

You can change like this,

in app.js,

$scope.open = function (val) {
   if (val == 1){
           $scope.modal.templateUrl ="path/to/firsttemp.html" ; 
        }else if (val== 2){
           $scope.modal.templateUrl ="path/to/secondtemp.html" ; 
        }
    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl:  $scope.modal.templateUrl ,
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

in html,

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="path/to/firsttemp.html">
        <div class="modal-header">
            <h3 class="modal-title">This is template 1</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <script type="text/ng-template" id="path/to/secondtemp.html">
        <div class="modal-header">
            <h3 class="modal-title">This is template 2</h3>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open('1')">template 1</button>
    <button type="button" class="btn btn-default" ng-click="open('2')">template 2</button>
</div>

plunker link for the same.

Hope this helps . .:)

Upvotes: 2

Related Questions