AngularJS - директива с динамическим шаблоном

0

Мне интересно - как создать Directive с динамическим шаблоном. Дело в том, - Когда я на главной странице и основные категории, как page1 или page2 моего шаблон должны иметь все divs

Когда я в подменю, например subpage1 или subpage2 я хочу иметь только 3 divs. Как динамически это удается? Я знаю, что я должен использовать на каждой подстранице свою директиву

<my-template whereIam="page1"></my-template> или <my-template whereIam="subpage2"></my-template>

Но я не могу этого добиться. Не могли бы вы помочь мне?

Моя директива с примером шаблона:

angular.module('dynamic-template').directive('myTemplate', function () {
    return {
        restrict: 'E',
        template: "<div1> "
                    + "<h1> Main pages and subpages </h1>"
                + "</div1>"
                + "<div2>"
                    + "<h2> Main pages and subpages </h2>"
                + "</div2>"
                + "<div3>"
                    + "<h3> Main pages and subpages </h3>"
                + "</div3>"
                + "<div4>"
                    + "<h4> Only mainpages </h4>"
                + "</div4>"
                + "<div5>"
                    + "<h5> Only subpages </h5>"
                + "</div5>"                     
    };
}]);

HTML на одной из страниц:

<my-template whereIam="??" ></menu-template>

Пример Plunkr

http://plnkr.co/edit/kVk3mJWUbTqhFEHVUjt1?p=preview

Я искал это, но я потерял :(

Использую ли я компиляцию $ для ее достижения?

Теги:
templates
dynamic
directive

2 ответа

1
Лучший ответ

* note: Лично я предпочитаю иметь шаблон в отдельном файле (используйте templateUrl)

но хорошо...

Вы можете пройти через страницу типа страницы и использовать ng-if.

angular.module('dynamic-template').directive('myTemplate', function () {
return {
    restrict: 'E',
    scope: { isMain: "=main"},
    template: "<div1> "
                + "<h1> Main pages and subpages </h1>"
            + "</div1>"
            + "<div2>"
                + "<h2> Main pages and subpages </h2>"
            + "</div2>"
            + "<div3>"
                + "<h3> Main pages and subpages </h3>"
            + "</div3>"
            + "<span ng-if='isMainPage'><div4>"
                + "<h4> Only mainpages </h4>"
            + "</div4>"
            + "<div5>"
                + "<h5> Only mainpages </h5>"
            + "</div5></span>"                     
};
}]);

и в вашем html (когда это главная страница)

<my-template main="true"/>

В противном случае мой ответ на подобный вопрос может сработать для вас:

Этот способ сделать это требует, чтобы вы создавали отдельные html файлы для каждого файла

qaru.site/questions/8937882/...

или Plunkr напрямую

Plunkr

app.directive('myDirective', [function(){

return {
    template: '<div ng-include="getTemplate()"></div>',
    restrict: 'E',
scope: {template: '='},
link: function(scope, element, attr, ctrl) {
  var baseURL = 'templates/myDirective.'

  scope.getTemplate = function(){
      baseURL = "" //remove this
      return baseURL + scope.template + ".html"
    };
}
};
}]);
Поделиться
  • 0
    Спасибо за помощь, но - я обновил свой Plunkr, и ваше решение (на основе ng-if) не работает :(
  • 0
    да, это так: plnkr.co/edit/n85cDv7zoB51LrPWeiYo?p=preview
Показать ещё 3 комментария
1

Почему бы не сделать, как сказал rmuller, и использовать шаблонURL, но вы можете передать в param и вернуть правильный пример шаблона

templateUrl: function (elem, attrs) {
                if (attrs.isMain === 'mainPage') {
                    return 'main_view.html';
                }
                return 'other_view.html';
            },

Таким образом, вы разделите свои шаблоны на файлы. Я думаю, что это было бы лучшим способом по моему мнению

Поделиться
  • 0
    Да, я также пытаюсь использовать templateUrl, но сейчас я тестирую простой template . Также спасибо за помощь!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню