Using templates in modal dialog in AngularJS

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..

class="btn btn-primary pull-right" style="margin-left: 10px; background: #990000"
ng-click="showEmail('1')"
ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">
T1
class="btn btn-primary pull-right"
style="margin-left: 10px; background: #990000"
ng-click="showEmail('2')"
ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">
T2
..............................
$scope.showEmail = function (id) {
var modalInstance = $modal.open({
templateUrl: (id == '1') ? 'template1.html' : 'template2.html',
controller: 'SearchController',
resolve: {
editId: function () {
return id;
}
}
});
}

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..

class="modal fade" id="dlgEmail" tabindex="-1" role="dialog">
class="modal-dialog" role="document">
class="modal-content">
class="modal-body">
class="row">
Content goes here

class="modal-footer">

class="row">

"button" class="btn btn-default"

data-dismiss="modal" ng-click="doEmail()"

style="background-color:crimson;color:white">

Submit

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Venkatesh Kumar6y ago
i am not sure why you are mixing angular and Jquery. If you want to try modal in Angular, you can check "ngBootstrap" module and "ngModal" packeges. Behind the scene it uses Jquery. you can check the below example page.

https://ng-bootstrap.github.io/#/components/modal/examples
0
Steve G6y ago
note: i mis-pasted the showEmail function. it should say 'AppController' and that is what it says in my code. so the mismatched controller names is not the issue.
0