How to pass a parameter to the templateUrl directive?

Question

Angular

Good afternoon.
Does anyone know how to pass a variable value to templateUrl?
Directive piece:

return {
      restrict: 'A',
      scope: {
        message: '=mainMessage',
        typeMessage: '=typeMessage'
      },
      templateUrl:  function(elem, attrs) {
        return 'template/common/' + attrs.typeMessage + '-message.tpl.html';
      },
      link: function(scope, element, attrs) {
      }

a piece of html with a directive call:

<div class="mess" main-message="message" type-message="message.type" 
      ng-repeat="message in messages track by message.id">
</div>

Now attrs.typeMessage returns message.type as text. And should return the given type, for example "general".

Answer 1

in your case only ng-include. The variable must be interpolated prior to calling the compile directive.

Answer 2

Thank you, I took the advice of Sergei Protko and did so.
piece of directive

return {
      template: '<ng-include src="getTemplateUrl()"/>',
      scope: {
        message: '=mainMessage',
        typeMessage: '=typeMessage'
      },
      restrict: 'A',
      controller: function($scope) {
        $scope.getTemplateUrl = function() {
          return 'template/common/' + $scope.typeMessage + "-message.tpl.html";
        }
      },
      link: function(scope, element, attrs) {
      }
    }

Maybe someone will come in handy. I collected covers for half a day)

Answer 3

Just did it recently.
Calling a function on templateUrl is somewhat misleading, as you cannot call this function and, accordingly, call it with any parameters you need. Therefore, the creation of a dynamic form for the directive, depending on external parameters, must be done in the link:

// тут можете сгенерировать любой вид директивы:
function getForm( obj, настройки){
     str = '<a title="открыть в новом окне" ng-href="contragents.admin.html#нси_ключ={{obj._source.нси_ключ}}" target="_blank" ng-show="obj._source._$editor_props.menu_type==1" class="btn btn-xs btn-primary"><span ng-show="obj._source._$editor_props.bool_change==true" class="glyphicon glyphicon-asterisk" style="color:rgb(255, 183, 100)"></span> <u>'+obj._index+'-'+obj._type+'</u> <sup><i class="fa fa-external-link"></i></sup> </a>';
    return str;
}

return {
    scope: { ... },
    // templateUrl: - убираем вообще
    link: function(scope, element, attrs) {
          var str_template = getForm(scope.obj, scope.настройки );
         // надеюсь это не сложно:
          var dom_node = $compile(str_template)(scope); 
          element.append(dom_node);
    }
};

Answer 4

I did this in my project:

App.controller('formCtrl', ['$scope', function ($scope) {

    $scope.order = {
        md5hash:"036e4ab264;3253465a34535234524635f353",
        name:'Введите имя',
        phone:'Укажите свой номер',
        email:'Ваш почтовый ящик',
        address:""
    };

}]).directive('formorder', [function() {
    return {
        templateUrl: 'tpl/formOrder.html',
        replace: true,
        scope:{
        },
        link: function ($scope, $element, $attrs){
            $scope.order = $scope.$parent.order;
        }
    }
}]);

direct connection