i have some directive:
.directive("modal", [function(){
var controller = function($scope, $attrs, $element, $uibModal){
var defaultOptions = {
title: "Modal title",
content: "Modal body"
},
userOptions = {
title: $attrs.title,
content: $attrs.content,
templateUrl: $attrs.templateUrl,
templateController: $attrs.templateController
};
options = angular.extend({},defaultOptions, userOptions || {});
$element.on($scope.event, function(){
$uibModal.open({
templateUrl: defaultTemplate,
controller: "DefaultModalController",
resolve: {
options: function () {
return options
}
}
});
});
},
defaultTemplate = "templates/default-modal-template.html";
return {
restrict: "A",
scope: {
event: "@"
},
controller: ["$scope", "$attrs", "$element", "$uibModal", controller]
}
}])
I using angular bootstrap modal, and I want something like this:
<section>
<header class="modal-header">
<h3 class="modal-title">{{modalOptions.title}}</h3>
</header>
<div class="modal-body" ng-if="modalOptions.templateUrl">
{{modalOptions.content}}
</div>
<div class="modal-body" ng-if="modalOptions.templateUrl" ng-include="modalOptions.templateUrl" ng-controller="modalOptions.templateController"></div>
<footer class="modal-footer">
<button type="button" class="btn btn-danger" ng-click="close()">Close</button>
</footer>
</section>
Of course it's not working because there is no controller like modalOptions.templateController, I want controller name under this variable.
Short: I need something like directive compile in bootstrap modal