獲取活動菜單元素並顯示其標題AngularJS

我讀，我可以使用某物，如：

var elementResult = element[0].getElementsByClassName('menu-item-active'); 
     console.log('element[0].getElementsByClassName: ', elementResult);

JSON：

{ 
    "title": "Fruits", 
    "mainmenu": [ 
     { 
      "id": "apples", 
      "title": "Apples", 
      "href": "#/apples", 
      "act": "menu-item-active" 
     }, 
     { 
      "id": "bananas", 
      "title": "Bananas", 
      "submenu": [ 
       { 
        "id": "banana-box", 
        "title": "Banana Box", 
        "href": "#/banana-box", 
        "act": "menu-item-active" 
       } 
      ] 
     } 
    ] 
}

我有一個指令

.directive('dir', function() { 
    return { 
     restrict: 'E', 
     template: "<nav class=\"navbar navbar-inverse navbar-fixed-top\" role=\"navigation\" id=\"nav-bar\">" 
         + "<div class=\"container-fluid\">" 
          + "<div class=\"navbar-header\">" 
           + "<span class=\"navbar-brand\" >{{title}} </span>" 
          + "</div>" 
          + "<ul class=\"nav navbar-nav\" ng-repeat=\"item in mainmenu\">" 
           + "<li>" 
            + "<a href=\"{{item.href}}\" data-active-menu-link=\"{{item.act}}\">{{item.title}}</a>" 
           + "</li>" 
          + "</ul>" 
         + "</div>" 
        + "</nav>" 
      } 
});

而且控制器：

.module('menu').controller('menuCtrl', ['$scope', '$http', function ($scope, $http) { 
     $http.get('MenuItems.json').success(function (data) { 
      $scope.mainmenu = data.mainmenu; 
      $scope.title = data.title; 
     }); 
    }]);

我想達到的目標： 的時候我會在每個站點/子網站，我想顯示其名稱的{{title}}在我的網站

我試圖用elementResult，但我不不知道如何檢查元素是否爲menu-item-active。我想過使用ng-if聲明，但我不知道如何處理它。

For.ex. ng-if="elementResult has class 'menu-item-active' then display its 'title' as {{title}} in menu bar

來源

2015-07-20 vvdfg_mine

你的JSON是無效的開始..你不能有一個數組中的屬性名稱等。你可以解決這個更新你的問題請使用正確的JSON。 –

我在JSON文件中沒有得到什麼錯誤？編輯：我看到一個錯誤，我糾正了它 –

從元素類改變標題沒有任何意義。爲什麼你不能使用路由參數呢？或者將指令與服務綁定。搜索DOM只是一種倒退的方法，因爲類可能首先由模型中的數據設置 – charlietfl

在dom中，getElementByClassName返回NodeList。

var nodeList = element[0].getElementsByClassName('menu-item-active');

那麼你必須遍歷節點。您可以使用它的長度屬性。

for (var i = 0 ; i < nodeList.length ; i++) 
    if (nodeList[i].className == 'menu-item-active') 
     var elem = $scope.findByClassName('menu-item-active');

和在控制器中的寫入範圍方法：

$scope.findByClassName = function(id){ 
    for (var i = 0 ; i < jsonArray.length ; i++) 
     if (jsonArray[i].mainmenu.act == id) 
      return jsonArray[i].title; 
    }

還要準備適當的JSON文件 - 密鑰值對和對象陣列（這些開始{和結尾}）。

另外，在Angular中，你可以傳遞給param到一個頁面/視圖，所以你可以使用路由和$ routeParam服務必須依賴注入你的控制器。然後頁面「新/ 3」，你要求"$routeParams.id"，你會得到3.

來源

2015-07-20 13:31:50 cyan

我認爲這是一種非常倒退的做事方式這應該在模型層面完全可行。不需要查看任何DOM元素 - 讓數據綁定處理它。 –

獲取活動菜單元素並顯示其標題AngularJS

回答

相關問題