Изменить шаблон директивы с помощью ng-click

У меня есть несколько кнопок с ng-click в контроллере, и я хочу изменить шаблон директивы a, когда я нажимаю кнопку. Каков наилучший способ добиться этого? (позже я буду использовать слайд в эффекте элемента)


javascript angularjs angular-directive
person user3800924    schedule 09.05.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Директива:

myModule.directive('foo', function() {
    return {
        scope: {
            templateType: '@'
        },
        template: '<div ng-if="templateType == \'a\'">' +
            '    this is template A ' +
            '</div>' +
            '<div ng-if="templateType == \'b\'">' +
            '    this is template B ' +
            '</div>'
    };
});

Шаблон:

<foo template-type="{{ templateType }}"></foo>
<a ng-click="templateType = 'b'" href="">Set template to b</a>

Контроллер:

$scope.templateType = 'a';
person JB Nizet    schedule 09.05.2015
comment
Я бы предложил использовать разные маршруты/представления для каждого частичного представления. - person harishr; 09.05.2015
comment
что, если оба шаблона большие ..? - person Pankaj Parkar; 09.05.2015
comment
Затем вы должны преобразовать шаблон в файл и использовать templateUrl, как и для любой другой директивы. - person JB Nizet; 09.05.2015
comment
@JBNizet, тогда как передать значение templateType в templateUrl - person Pankaj Parkar; 09.05.2015
comment
Вы не передаете templateType в templateUrl. Вы передаете его директиве так же, как и выше. Встраивание шаблона в директиву или загрузка его из URL-адреса не меняет способ работы директивы. - person JB Nizet; 09.05.2015
comment
@JBNizet, вот о чем я спрашиваю, как бы вы передали значение templateType функции templateUrl - person Pankaj Parkar; 09.05.2015
comment
templateUrl не является функцией. Это строка, содержащая URL-адрес шаблона на сервере. Поэтому вместо template: 'html code' вы пишете templateUrl: 'url of the html file containing the html code'. Остальное идентично. - person JB Nizet; 09.05.2015
comment
Давайте продолжим обсуждение в чате. - person Pankaj Parkar; 09.05.2015

arrow_upward
2
arrow_downward

Вы можете расширить пример, предоставленный @JB Nizet, и использовать ng-include для замены шаблонов, и управление шаблонами большего размера станет проще.

myModule.directive('foo', function() {
    return {
        scope: {
            templateType: '@'
        },
        template: '<div ng-include="\'/templateRoot/\' + templateType">'+
                  '</div>'
    };
});

Теперь вы можете создавать отдельные файлы шаблонов и делать их доступными по определенному URL-адресу (в данном случае /templateroot/a или /templateroot/b).

person Chandermani    schedule 09.05.2015
comment
использование ng-include имеет смысл..+1 - person Pankaj Parkar; 09.05.2015