AngularJS 的动态菜单答案

【问题标题】：Dynamic menu with AngularJSAngularJS 的动态菜单
【发布时间】：2014-12-25 17:12:16
【问题描述】：

我有一个带有两个菜单的 Web 应用程序，一个在顶部，另一个在左侧。将根据记录的配置文件从数据库中检索两个菜单的选项。但是，当路线发生变化时，菜单不会呈现。

Shell.js：

<section>
 <div data-ng-include="'app/controllers/layout/header.html'"></div>
 <div id="menuDin" data-ng-include="'app/autenticado/menuDinamico.html'"></div>
 <div id="corpo" ng-view=""></div>
 <div data-ng-include="'app/controllers/layout/footer.html'"></div>
</section>

【问题讨论】：

控制台返回什么？
它正确返回菜单项，但没有显示在屏幕上。
如果您在控制台中手动调用$scope.$digest()，视图会更新吗？

标签： angularjs angularjs-ng-include ng-view

【解决方案1】：

您可以为控制器创建一个包含菜单项的对象，然后使用ng-repeat 绘制菜单。

class MyController
constructor: ->
    @itens_menu = [ 
        {label: 'MenuA', href: 'urlA'}, 
        {label: 'MenuB', href: 'urlB'}
    ]

<ul ng-controller="MyCtrl as MyController">
        <li ng-repeat="item in MyCtrl.itens_menu">
            <a href="{{item.href}}">{{item.label}}</a>
        </li>
</ul>

【讨论】：