Question

我正在尝试使用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'
    };
  });

元素/ 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循环遍历它们。

Answer 1

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

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

AngularJS ngrepeat和指令

1 个答案: