If you want to display a template in a dialog using AngularUI, you don't have to manually load it. The $dialog service allows you to provide a static template or a template URL. The URL can return any data, as it triggers a GET request via AJAX and populates the dialog with the retrieved information. This request is locally cached for subsequent calls, enhancing performance.
Below is a basic example to help you get started:
Javascript
angular.module('app', ['ui.bootstrap.dialog'])
.controller('Ctrl', function($scope, $dialog, $window) {
$scope.open = function() {
var options = {
backdrop: true,
keyboard: true,
controller: 'DialogCtrl',
templateUrl: 'path/to/view'
};
var dialog = $dialog.dialog(options);
dialog.open().then(function(result) {
if (result === 0) {
$window.alert("Cancel pressed");
}
else if (result === 1) {
$window.alert("OK pressed");
}
});
};
})
.controller('DialogCtrl', function($scope, $http, dialog) {
$scope.close = function(result) {
dialog.close(result);
};
$http.get('/path/to/service')
.success(function(response) {
$scope.items = response;
});
});
Main HTML
<div ng-app="app" ng-controller="Ctrl">
<button ng-click="open()">Open dialog</button>
</div>
View HTML
<div class="modal-header">
<h3>Title</h3>
</div>
<div class="modal-body">
<p ng-repeat="item in items">{{ item }}</p>
</div>
<div class="modal-footer">
<button class="btn" ng-click="close(0)">Cancel</button>
<button class="btn btn-primary" ng-click="close(1)">OK</button>
</div>
This Plunker script showcases the functionality discussed.
Update: The example code has been updated to illustrate how you can dynamically alter the content of the dialog box.