AngularJS ngrepeat 和指令答案

【问题标题】：AngularJS ngrepeat and directivesAngularJS ngrepeat 和指令
【发布时间】：2014-10-21 10:05:24
【问题描述】：

我正在尝试使用 AngularJS 指令和 ngRepeat 来绘制菜单

这是我的控制器和指令：

angular.module('root', [])
  .controller('sideMenu', ['$scope', function($scope) {
    $scope.menuItems = [
      { name: 'TRACTION', id: 1 },
      { name: 'CONVERSION', id: 2 },
      { name: 'FINANCIALS', id: 3 },
      { name: 'USAGE', id: 4 }
    ];
  }])
  .directive('menuItem', function() {
    return {
      restrict: 'E',
      scope: {
        item: '='
      },
      templateUrl: 'elements/sidebar.html'
    };
  });

elements/sidebar.html

<a href="#{{item.name}}">{{item.name}}</a>

index.html

<div class="leftSide" ng-controller="sideMenu">
  <ul>
    <li ng-repeat="item in menuItems">
      <menu-item item="{{item.name}}"></menu-item>
    </li>
  </ul>
</div>

目前没有显示任何内容，我确实看到 ng-repeat 正在通过创建 4 个 <li> 元素来工作，但该指令不起作用。

在我使用 ng-repeat 之前，我列出了每个菜单项并且必须有单独的 $scope 项，我想移动数组中的所有元素并使用 ngRepeat 循环遍历它们。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

将item="{{item.name}}" 更改为item="item.name"

你不需要它，因为它是 bi-directional reference

【讨论】：

其实只好改成item="item"。现在可以用了，谢谢。在 AngularJS 中是否有更“正确”的方法来做到这一点？
这对我来说似乎是最正确的方式。