2
Answers

Using templates in modal dialog in AngularJS

Steve G

Steve G
4y
641
1
I'm having a heck of a time trying to get this to work. i'm more familiar with jQuery but this app isn't using jQuery and i don't want to mix the 2. plus, i don't think you can use templates in jQuery. anyway, i'll show the code snippets i tried and maybe you can tell me where i went wrong. i have 2 buttons that open a modal dialog where the content of the modal is stored in a template and the template chosen depends on the button clicked..
  1. <button class="btn btn-primary pull-right" style="margin-left: 10px; background: #990000"    
  2.         ng-click="showEmail('1')"    
  3.         ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">    
  4.     T1    
  5. </button>    
  6. <button class="btn btn-primary pull-right"    
  7.         style="margin-left: 10px; background: #990000"    
  8.         ng-click="showEmail('2')"    
  9.         ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">    
  10.     T2    
  11. </button>    
  12. ..............................    
  13.     
  14. $scope.showEmail = function (id) {    
  15.     var modalInstance = $modal.open({    
  16.         templateUrl: (id == '1') ? 'template1.html' : 'template2.html',    
  17.         controller: 'SearchController',    
  18.         resolve: {    
  19.         editId: function () {    
  20.             return id;    
  21.             }    
  22.         }    
  23.     });    
  24. }    
at first i was confused as to where i was supposed to reference the actual modal id (in html) that i want to open but then realized that maybe that's what the templates were for..
  1. <div class="modal fade" id="dlgEmail" tabindex="-1" role="dialog">    
  2.     <div class="modal-dialog" role="document">    
  3.         <div class="modal-content">    
  4.             <div class="modal-body">    
  5.                 <div class="row">    
  6.                     <p>    
  7.                         Content goes here    
  8.                     </p>    
  9.                 </div>    
  10.             </div>    
  11.             <div class="modal-footer">    
  12.                 <div class="row">    
  13.                     <button type="button" class="btn btn-default"    
  14.                             data-dismiss="modal" ng-click="doEmail()"    
  15.                             style="background-color:crimson;color:white">    
  16.                         Submit    
  17.                     </button>    
  18.                 </div>    
  19.             </div>    
  20.         </div>    
  21.     </div>    
  22. </div>  
my first attempt at running this, i got an error '$modal not defined'. when i looked that up it said that i need to inject $modal into my controller so i tried this..
  1. app.controller("AppController",  
  2. function($scope, $http, $modal) {  
  3. var t = this;  
once i added that, i had high hopes that it was gonna work but instead i got another error..
 
'$injector:unpr Unknown Provider'.
 
every example makes it sound this simple but i can't get it to work. any help would be much appreciated. 
Answers (2)
Next Recommended Forum