2014-11-14 66 views
3

我想在角度中建立一個菜單和一個子菜單。 我想要做的是有對象 菜單菜單和點擊不同的子菜單

menu = [{name: 'Name1', link: '/link1'}, {name: 'Name2', link: '/link2'}] 
submenu = [[{name: 'SubName1', link: '/Sublink1'}, {name: 'SubName1', link: '/sublink1'}], 
[[{name: 'SubName2', link: '/Sublink2'}, {name: 'SubName2', link: '/sublink2'}]] 

所以,當我點擊Name1SubMenu第一陣列將被選中,並點擊Name2當第二陣列將被選中的兩個陣列。 如何爲主菜單和第二個菜單創建兩個指令,並能夠在點擊之間進行通信。我已經嘗試在控制器中構建這個,我可以使用$index來選擇子菜單,但是子菜單不能隨意移動,因爲它需要在控制器之下。

我終於在這裏解決我的問題是解決方案:http://jsfiddle.net/4kjjyL4s/4/

我怎樣才能提高我的解決方案?

回答

0

由於缺乏信息,因此無法給出確切的答案,但是例如,如果您在應用程序中的其他位置使用帶有不同菜單項的指令,我建議將菜單數組從控制器( ng-controller,而不是指令的控制器)通過指令的範圍。

此外,你正在尋找指示直接溝通的標準方式(在你的情況下,菜單和子菜單指令之間的通信,以通知項目選擇變化),使用指令的控制器。這是一個很好的教程。

https://thinkster.io/egghead/directive-to-directive-communication/

4

不要重新發明輪子:) UI路由器是預包裝的解決方案,處理嵌套路由你。

如果您有一個項目菜單,並且當其中一個項目被選中時,您想要顯示另一個項目菜單,那麼UI路由器就是這樣做的。 https://github.com/angular-ui/ui-router

0

要在控制器或指令之間進行通信,您應該使用服務

從角度引導件(https://docs.angularjs.org/guide/services):

角服務是連接在一起使用依賴注入(DI)可取代的對象。您可以使用服務在整個應用中組織和共享代碼。

我檢查了您在jsfiddle上發佈的代碼(http://jsfiddle.net/4kjjyL4s/4/),並試圖保留大部分代碼。以下是我對JavaScript文件的更改(請閱讀代碼中的註釋)。

var app = angular.module("app",[]); 

app.controller('main', function(){}); 
// The service will be responsible for the shared objects and logic 
app.service('MenuService', function() { 
    var list = [ 
    { 
     name: "Menu1", link: "#menu1", 
     submenu: [ 
     { name: "Menu1Sub1", link: "#submenu1" }, 
     { name: "Menu1Sub2", link: "#submenu2" } 
     ] 
    }, 
    { 
     name: "Menu2", link: "#menu2", 
     submenu: [ 
     { name: "Menu2Sub1", link: "#submenu1" }, 
     { name: "Menu2Sub2", link: "#submenu2" } 
     ] 
    } 
    ]; 

    var selected = []; 

    // methods and attributes published under the **this** 
    // keyword will be publicly available 
    this.getMenu = function() { 
    return list; 
    }; 

    this.getSubmenu = function() { 
    return selected; 
    }; 

    this.select = function (menuItem) { 
    // this does the *trick*! 
    // if we use the assignment operator here, we would replace the 
    // reference returned in the getSubmenu() method, so as the original 
    // reference did not change, angular's dirty checking would not detect it. 
    // using angular.copy() method, we are copying the contents of the 
    // selected submenu over the same reference returned by getSubmenu() 
    angular.copy(menuItem.submenu, selected); 
    }; 
}); 

// No $rootScope injection results in better re-usability. When you were 
// relying in $rootScope sharing, both directives should live in the 
// $rootScope, so if you add them inside a ng-controller created scope 
// they would not work anymore 
app.directive("menu", function() { 
    return { 
    restrict: "E", 

    // no need to isolate scope here, *scope:true* creates a new scope 
    // which inherits from the current scope 
    scope: true, 

    // with controllerAs (introduced in angular 1.2), you can skip 
    // polluting the scope injection. 
    controllerAs: "ctrl", 
    controller: function(MenuService) { 
     this.list = MenuService.getMenu(); 
     this.changeSub = function (menuItem) { MenuService.select(menuItem); }; 
    }, 
    template: "<div ng-repeat='menu in ctrl.list'><button ng-click='ctrl.changeSub(menu)'>{{menu.name}}</button></div>" 
    }; 
}); 

app.directive("submenu", function() { 
    return { 
    restrict: "E", 
    scope: true, 
    controllerAs: "ctrl", 
    controller: function(MenuService) { 
     this.sublist = MenuService.getSubmenu(); 
    }, 
    template: "<span ng-repeat='menu in ctrl.sublist'>{{menu.name}} | </span>aa" 
    }; 
}); 

這裏是更新的HTML文件,只是爲了顯示這兩個指令現在的工作沒有直接插在$rootScope

<div ng-app="app"> 
    <div ng-controller="main"> 
     <menu></menu> 
     <h1>Hello World!</h1> 
     <div class="main-content"> 
      <submenu></submenu> 
     </div> 
    </div> 
</div> 

希望它能幫助!

0

試試這個代碼:

function MyCtrl ($scope) { 
     $scope.subMenu = []; // default is false 

    $scope.toggleSubMenu = function (index) { 
     $scope.subMenu[index] = !$scope.subMenu[index]; 
    }; 
} 

HTML

<ul> 
    <li ng-class="{active: subMenu[0]}"> <a href="#hello" ng-click="toggleSubMenu(0)">Name1</a> 
     <ul> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
     </ul> 
    </li> 
    <li ng-class="{active: subMenu[1]}"> <a href="#foo" ng-click="toggleSubMenu(1)">Name2</a> 
     <ul> 
      <li>bar</li> 
      <li>bar</li> 
      <li>bar</li> 
     </ul> 
    </li> 

</ul> 

還要檢查this