Как динамически изменить заголовок текущего элемента меню AngularJS (шаблон в директиве)

0

Я думаю, как решить эту проблему. Пусть начнется:

У меня есть панель меню (или панель навигации) на моем сайте.

Я создаю его из файла JSON, я использую директиву AngularJS и шаблон для его создания:

Файл JSON:

{
    "mainmenu": [
        {
            "id": "bananas",
            "title": "Bananas",
            "href": "#/bananas",
            "li-class": "menu-element"
        },
        {
            "id": "apples",
            "title": "Apples",
            "li-class": "dropdown"
            "submenu": [
                {
                    "id": "apple-lot",
                    "title": "Apples lots",
                    "href": "#/apples/lot"                  
                },
                {
                    "id": "apple-series",
                    "title": "Apples series",
                    "href": "#/apples/series"
                }               
            ]
        },
        {
            "id": "cherries",
            "title": "Cherries",
            "href": "#/cherries",
            "li-class": "menu-element"
        }
    ]
}

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

angular.module('dynamic-menu').directive('menuTemplate', function () {
    return {
        restrict: 'E',
        template: "<nav class=\"navbar navbar-inverse navbar-fixed-top\" role=\"navigation\" id=\"nav-bar\" style=\"margin-bottom: 0.5%\">"
                        + "<div class=\"container-fluid\">"
                            + "<div class=\"navbar-header\">"
                                + "<span class=\"navbar-brand\">TITLE</span>"
                            + "</div>"
                            + "<div class=\"collapse navbar-collapse\">"
                                + "<span class=\"navbar-brand\">"
                                        + "<ul class=\"nav navbar-nav\">"
                                            + "<li ng-repeat=\"item in mainmenu\">"
                                                + "<a href=\"{{item.href}}\">{{item.title}}</a>"
                                            +"</li>"
                                        +"</ul> <!-- /.nav navbar-nav -->"
                                    +"</span> <!-- /.navbar-brand -->"
                                +"</div> <!-- /.navbar-collapse-->"
                            +"</div> <!-- /.container-fluid-->"
                        +"</nav>"
           };
}]);

И контроллер AngularJS:

angular.module('dynamic-menu').controller('dynamicMenuCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('MenuItems.json').success(function (data) {

        $scope.mainmenu = data;
    });

Проблема заключается в том, как динамически изменять TITLE?

Эта строка в моей директиве AngularJS:

+ "<span class=\"navbar-brand\">TITLE</span>"

Может быть, я могу добавить что-то в свой файл JSON и проверить каким-то образом, есть класс, назначенный для элемента active-menu? (например, <li class="menu-item-active">) или как?

Вот Plunker - и есть Title который я хочу динамически менять в своем шаблоне

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

Я должен использовать директиву

EDIT: Что я хочу достичь:

На main page я хочу иметь титульные fruits, когда я нахожусь в подменю " Bananas я хочу показать название " Bananas

Теги:
controller
directive

1 ответ

1

JSON:

{
    "title": "some title",
    "mainmenu": [
        {
            "id": "bananas",
            "title": "Bananas",
            "href": "#/bananas",
            "li-class": "menu-element"
        },
        {
            "id": "apples",
            "title": "Apples",
            "li-class": "dropdown"
            "submenu": [
                {
                    "id": "apple-lot",
                    "title": "Apples lots",
                    "href": "#/apples/lot"                  
                },
                {
                    "id": "apple-series",
                    "title": "Apples series",
                    "href": "#/apples/series"
                }               
            ]
        },
        {
            "id": "cherries",
            "title": "Cherries",
            "href": "#/cherries",
            "li-class": "menu-element"
        }
    ]
}

в шаблоне

"<span class=\"navbar-brand\">{{title}}</span>"

js: angular.module('dynamic-menu'). controller ('dynamicMenuCtrl', ['$ scope', '$ http',

function ($scope, $http) {
    $http.get('MenuItems.json').success(function (data) {

        $scope.mainmenu = data;
        $scope.title = data.title;
    });

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

  • 0
    Я обновил свой Plunkr, потому что было немного miskate, теперь это хорошо. Я тоже изменился, как вы написали, но это не работает. Если вы нажмете на. ех. на Bananas title такой же "какой-то заголовок" редактировать - сейчас проверяю
  • 0
    У меня есть заголовок, но он статичный. Я хочу изменить заголовок, когда я нахожусь в подменю (когда я нажимаю на bananas я хочу отобразить заголовок bananas ) :(
Показать ещё 3 комментария

Ещё вопросы

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