Установите templateUrl на основе атрибута в директиве

Я работаю над набором угловых директив и хочу загрузить правильный шаблон на основе наличия или значения атрибута.

<my-form horizontal> </my-form>
<my-form vertical> </my-form>

Если по горизонтали, templateUrl должен быть /partials/horizontal-form, а если по вертикали, templateUrl должен быть /partials/vertical-form

Меня интересует templateUrl, потому что я не могу использовать template, так как html зависит от атрибутов. В функции compile.pre html уже загружен.

Если есть другой способ добиться этого, я открыт для него, так как сейчас я начинаю с angular, и чем больше информации, тем лучше.

Спасибо


angularjs directive
person ritcoder    schedule 16.09.2012    source источник
comment
Я просмотрел это. Это аналогичная идея, за исключением того, что она основана на «шаблоне кода»/коде, поэтому все встроено.   -  person ritcoder    schedule 16.09.2012
comment
Возможный дубликат URL динамического шаблона директивы Angular.js   -  person fracz    schedule 18.05.2016
comment
в AngularJS 1.5 вы можете использовать это решение: stackoverflow.com/a/41743424/1274852   -  person hkong    schedule 14.06.2017

Ответы (2)


arrow_upward
11
arrow_downward

Одним из решений для этого является использование ng-include внутри файла шаблона.

Первый атрибут внутри файла шаблона будет иметь что-то вроде:

<div ng-include = "getTemplate()">

</div>

В вашем директивном коде вы должны написать что-то вроде:

scope : {direction : "="},
link : function(scope,element,attrs)
{
    scope.getTemplate = function(){
        if(scope.direction === "horizontal")
        {
            return "horizontal.html";
        }
        return "vertical.html";
    }
}

Надеюсь это поможет!

person ganaraj    schedule 17.09.2012
comment
Действительно, одним из решений будет использование ngInclude. Постараюсь решить проблему, пока ищу другой способ ее обойти. Спасибо. - person ritcoder; 19.09.2012
comment
Для тех, кто ищет, вот более чистый способ сделать это: stackoverflow.com/a/23999356/656963 - person David; 23.09.2015

arrow_upward
22
arrow_downward

к вашему сведению, теперь это правильно исправлено в angular 1.1.4.

вы можете передать функцию в templateUrl. входные параметры - элемент, атрибуты. и возвращает строку (templateUrl, которую вы хотите использовать)

документы здесь: http://code.angularjs.org/1.1.4/docs/guide/directive

person JasonS    schedule 13.05.2013
comment
обновленная ссылка http://code.angularjs.org/1.1.4/docs/partials/guide/directive.html - person J Castillo; 25.06.2013
comment
Хотя @jaysun указал правильный способ сделать это (функция для установки значения templateUrl) в некоторых сценариях (например, субрендеринг в уже загруженном шаблоне, подход, указанный ganaraj, также может быть практичным) - person fmquaglia; 31.01.2014
comment
Я не думаю, что он компилирует атрибуты, хотя... например, вы не можете передать этот надеющийся шаблон attr, который компилируется, например, в "RADIO" (но вы можете буквально поставить template=RADIO, и это будет работать, но, очевидно, не может использоваться для динамического вопросы в моем примере): ‹div ng-repeat=subquestion in currentquestion.subquestions› ‹question question=subquestion template={{subquestion.question_type}} /› ‹/div› - person armyofda12mnkeys; 18.10.2015