Из https://github.com/angular-ui/ui-router/wiki
templateUrl также может быть функцией, возвращающей URL-адрес. Он принимает один предустановленный параметр, stateParams, который не внедряется.
$stateProvider.state('contacts', {
templateUrl: function ($stateParams){
return '/partials/contacts.' + $stateParams.filterBy + '.html';
}
})
Каковы некоторые преимущества возврата функции в templateURL? Извините, если это немного расплывчато. Я пытаюсь полностью окунуться в ui-router.
«Выгода» — возможно, странный способ выразить это. Он добавляет маршрутизатору возможность динамически решать, какой шаблон использовать для данного маршрута, в зависимости от $stateParams. Альтернативным способом добиться чего-то подобного было бы использование ngIfs или ngSwitchs в одном шаблоне для маршрута.
Какой из них вы используете, я думаю, вероятно, зависит от ваших предпочтений / того, что вы считаете хорошей практикой кодирования для поставленной задачи. Если бы у меня было 2 радикально разных и длинных шаблона, я бы, вероятно, использовал функцию для динамического URL-адреса шаблона. Если бы у меня были короткие или очень похожие шаблоны, я бы, наверное, использовал ngIf.
Кроме того, я использовал ui-router несколько раз и до сих пор никогда не использовал функцию как templateUrl.
В руководстве для разработчиков есть хороший пример этого в разделе директив.
Основная идея заключается в том, что вы можете «динамически» выбирать шаблон, который лучше всего подходит для текущего экземпляра:
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr){
return 'customer-'+attr.type+'.html';
}
};
});
Как вы можете себе представить, используя это, вы можете настроить окончательный URL-адрес шаблона, назначив в этом случае атрибут с именем type:
<div ng-controller="Controller">
<div my-customer type="name"></div>
<div my-customer type="address"></div>
</div>
В сценарии ui-router вместо этого вы можете получить доступ к параметрам состояния, но идея та же.
