How To Dynamically Change Templateurl Of Directive From Controller

I want to pass the templateUrl for app_modal directive from controller 'ServerController' so that the same directive can be used for different modals having different template. So

Solution 1:

When the templateUrl function runs, the scope is not available and the attribute values are still not interpolated. So, if you have something like:

<fooparam="{{a}}"></foo>

then in templateUrl you will get the string "{{a}}" for attrs.param - not the value of $scope.a.

Instead, you'd need to accept the template url as a variable (ideally via isolated scope) to the directive. Inside the directive you could cheaply use ng-include bound to that value.

.directive("appModal", function() {
  return {
    restrict: "E",
    replace: true,
    scope: {
      modal: "=modalBody",
    },
    template: '<div ng-include="modal.templateUrl"></div>'
  };
});

The usage is as you suggest:

<app-modalmodal-body="confirmDelete"></app-modal>

And in the controller:

$scope.confirmDelete = {
  // other properties,
  templateUrl: "path/to/template.html"
}