Как в templateUrl директивы передать параметр?

Question

[Dimon]

Добрый день.
Кто нибудь знает, как передать в templateUrl значение переменной?
Кусок директивы:

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) {
			}

кусок html с вызовом директивы:

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

Сейчас attrs.typeMessage возвращает message.type, как текст. А должен возвращать заданный тип, например "general".

Answer 1

[Сергей Протько]

в вашем случае только ng-include. Переменная должна быть интерполирована до вызова compile директивы.

Comments

[Dimon]

Спасибо, буду копать в этом направлении!

Answer 2

[Dimon]

Спасибо, воспользовался советом Сергея Протько и сделал так.
Кусок директивы,

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) {
			}
		}

Может кому-то пригодится. Пол дня чехлов собирал)

Comments

[Сергей Протько]

ух как вы мою фамилию искаверкали)

[Dimon]

Сергей Протько: Извиняюсь, исправил! У друга такая фамилия, вот везде и мерещиться!

Answer 3

[Alex XYZ]

Как раз недавно делал.
Вызов функции в templateUrl несколько вводит в заблуждение, т.к. эту функцию вы не сможете вызвать и соответственно вызвать её с какими-либо нужными для вас параметрами. Поэтому создание динамичной формы для директивы в зависимости от внешних параметров надо делать в 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);
    }
};

Comments

[Dimon]

Да, так можно сделать, но немного смущает перенос тегов в скрипт. По поводу templateUrl с вами полностью согласен.

[Alex XYZ]

Dimon: Всегда приятно иметь под рукой парочку решений. :)

[Сергей Протько]

Захаров Александр: парочку кастылей вы хотели сказать. ng-include делает ровно то же самое, но только вы напрямую не работаете с DOM, меньше императивного кода, меньше шансов сделать багу.

[Alex XYZ]

Сергей Протько: Вашей репликой вы и своё решение называете костылём. Второй из пары... Хотя лично я так не считаю.

[Сергей Протько]

Захаров Александр: в ангуляре работать с DOM напрямую не желательно, вот мой поинт. Используя внутренее API ангуляра ($compile/$parse) мы завязываемся на фреймворк. В большинстве случаев это ок, но если хочется потом мигрировать на второй ангуляр - надо отучать себя.

[Alex XYZ]

Сергей Протько: Я пока 2-й ангуляр не смотрел, но "морально" готовлюсь. Спасибо за совет, учту. Но ведь и link тоже не зря придумали. Кроме того, мне ну уж очень не нравится система кэширования templat-ов ангуляром. Напишешь какой-нибудь шаблон, ангуляр его закеширует и бывает что не выкинуть его из кэша кроме как калёным железо - закрыть и открыть браузер. В разработке дико мешает. (помню про галочку в настройках chrome, но при открытых десятке окон или в другом браузере кроме chrome легко запутаться).

[Сергей Протько]

Захаров Александр: link придумали за тем что бы работать с DOM, то есть в случае если подругому ну вот никак. Например если вам надо на DOM события подписаться, или еще чего сделать, но это маленький процент задач. Раньше линк юзали активнее потому что с контроллерами директив было не так удобно, с ерсии 1.2 все стало хорошо, с версии 1.4 вообще замечательно.

По поводу системы кеширования шаблонов - по умолчанию ангуляр ничего не кеширует, кеширует браузер. Вы можете отключить кеширование как в браузере так и заголовками web-сервера, это не так сложно. Вроде как uiRouter имеет свой слой кеширования но его можно отключить декорацией.

p.s. я редко юзаю templateUrl, все чаще просто template использую и подключаю шаблоны через webpack/jspm.

[Alex XYZ]

Сергей Протько: "если вам надо на DOM события подписаться". Вот хорошо, что вы это упомянули. Только с помощью одних ng-include не узнать какие объекты-контролы появились у пользователя. Поэтому если нужно подкрутить директиву, чтобы она сообщала об изменениях, то юзать link - самое то, чтобы настроить $watch, а ещё лучше $watchGroup, чтобы выставлять флаг изменения формы, если количество полей больше, чем 1-2. Так что если хочется сделать хорошую форму, которая покажет (например, звёздочкой на кнопке *Ok или *save), что данные изменены, то без link никак. Я в последнее время везде леплю эту звёздочку рядом со значимыми кнопками. Поэтому я так и вцепился в link. :)

[Сергей Протько]

Захаров Александр: опишите задачу нормально и я покажу как ее решить без этой сатаны с ивентами и прочим.

[Alex XYZ]

Сергей Протько: Я достаточно долго искал решение описанной мною задачи и не нашёл никаких альтернатив. Вот мой email: ****, если пришлите мне на него письмо (или напишите emale в ответе), я вышлю вам скрины работающих форм с описанием (у меня там есть случаи с неограниченным количеством input-ов и 400-500 полей ввода на форму - почти обычная ситуация - источники из нескольких разнородных баз. В основном view, но пользователь может захотеть поправить любую строку). Ответить смогу вам завтра (15-го) утром - программа на работе.

[Сергей Протько]

Захаров Александр: отправил письмо, уже интересно)

[Антон]

Сергей Протько: если нашли какое-то интересное решение, то можете где-то код выложить? Был бы очень признателен :)

[Сергей Протько]

Антон: ух занят был, думаю на выходных набросать решение, задачка у вас не совсем стандартная)

[Сергей Протько]

Антон: ну и еще - тут есть определенная специфика UI. Тут больше подходит не ангуляр а какой-нибудь rxjs.

[Антон]

Сергей Протько: у меня такой задачки нет, я просто изучаю ангуляр в боевых условиях, и очень малое количество работающего кода, который я видел, отвечает хоть каким-то приличным требованиям)

[Сергей Протько]

Антон: да, с этим беда страшное, я тоже на гитхабах практически не встречал ничего вменяемого, того что соответствовало бы "бест практис".

[Антон]

Сергей Протько: надо запилить репу, куда выкладывать архитектурно правильные решение с их обоснованиями в комментах) Потому-что даже годную статью редко найти можно, например радовался, когда нашел эту https://github.com/johnpapa/angular-styleguide/blo...

Answer 4

[Sava-s]

Я в своём проекте сделал так:

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;
        }
    }
}]);

прямая связь