[英]Unable to change angularjs directive template dynamically upon user action
[英]How to dynamically change the Title of current menu element AngularJS (template in directive)
我在想如何解決這個問題。 開始吧:
我的網站上有一個菜單欄(或導航欄)。
我正在從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文件中添加一些內容,然后以某種方式檢查是否為活動菜單元素分配了一個類? (例如<li class="menu-item-active">
)還是如何?
這是Plunker-我想在模板中動態更改Title
http://plnkr.co/edit/U1xG2E4ys7SGz7WxBtvq?p=預覽
我必須使用指令
編輯:我想實現:
在main page
我想要標題fruits
,當我進入子菜單Bananas
我想要顯示標題Bananas
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;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.