How can I dynamically pass the templateUrl for the app_modal directive from the "ServerController" controller to allow for different templates for different modals? I have included the URL as an attribute in the "app-modal" tag used in the server_group.html view and am returning that URL from the templateUrl property of the directive. However, I encounter the following error:
TypeError: Cannot read property 'protocol' of undefined
at urlIsSameOrigin (http://localhost/js/:30578:17)
at $http (http://localhost/js/:24316:23)
at Function.$get.$http.(anonymous function) (http://localhost/js/:24533:18)
at compileTemplateUrl (http://localhost/js/:23130:13)
at applyDirectivesToNode (http://localhost/js/:22755:24)
at compileNodes (http://localhost/js/:22354:15)
at compileNodes (http://localhost/js/:22366:15)
at compile (http://localhost/js/:22287:15)
at compile (http://localhost/js/:38714:15271)
Directive for Modal -
angular.module("app")
.directive("appModal", function() {
return {
restrict: "E",
replace: true,
scope: {
modal: "=modalBody"
},
templateUrl: function(element, attrs) {
return attrs.templateUrl;
}
};
});
Controller -
function ServerController($scope) {
$scope.confirmDelete = {
body: "Are you sure you want to delete?",
primaryBtn: "Delete",
cancel: "Cancel",
templateUrl: "pages/DRaaS/app/ServerGroup/partials/app_modal.html"
};
}
Html -
<app-modal modal-body="confirmDelete" templateUrl="pages/DRaaS/app/ServerGroup/partials/app_modal.html"><app-modal>