Question

我是AngularJS的新手。我有一个提供json响应的休息服务，我使用此响应来构建导航菜单。此响应具有以下结构。

菜单项A.
- 菜单项A1
  - 菜单项A1-1
- 菜单项A2
  - 菜单项A2-1
菜单项B.
- 菜单项B1
  - 菜单项B1-1
  - 菜单项B1-2
- 菜单项B2

我能够使用自定义指令递归地构建此结构。

module.directive("tree", function($compile) {
  return {
    restrict: "E",
    transclude: true,
    scope: {menu: '='},
    template:
    '<ul>' +
      '<li ng-transclude ng-repeat="menuItem in menu.menuItems" ng-controller="MyItemController">' +
        '<a ng-click="getTitles(menuItem.taxId);">{{ menuItem.text }} {{ menuItem.childCount }}</a>' +
        '<tree menu="menuItem.subMenu"></tree>'+
      '</li>' +
    '</ul>',
    compile: function(tElement, tAttr, transclude) {
      var contents = tElement.contents().remove();
      var compiledContents;
      return function(scope, iElement, iAttr) {
        if(!compiledContents) {
          compiledContents = $compile(contents, transclude);
        }
        compiledContents(scope, function(clone, scope) {
          iElement.append(clone);
        });
      };
    }
  };
});

这是加载此菜单的控制器json

var module = angular.module('myapp',[]);

module.controller("MyController", function ($scope, $http) {

  $http.get('<link to rest service for loading menu>').
  success(function(data) {
    $scope.menu = data;
  });

});

这是每个菜单项的项目控制器

module.controller("MyItemController", function ($scope, $http) {

  $scope.getTitles = function (taxId) {

    $http.get('<link to rest service for loading the detail for clicked menu item>').
    success(function(data) {
      $scope.titlesList = data; // This is where I get the data from menu item click but I don't know how to use titlesList as the scope here is isolated one for each menu item.
    });
  };

});

这是html

  <div class="row">

    <div class="col-md-4" ng-controller="MyController">

      <nav id="menuwrapper">

        <tree menu="menu"></tree>

      </nav>

    </div>

    <div class="col-md-8">
      <!-- This is where I want to load the content when I get response from json after clicking menu item -->
    </div>

  </div>

在单击菜单项时调用其余服务时工作正常。但我不明白如何引用从json加载的数据，因为ngRepeat会为每个项目生成单独的控制器和范围。

我认为这是一项非常常见的任务，可能会有一种不同的更好的方法来做到这一点，我不知道。所以，请随意提出任何最佳做法。

在菜单项的另一个视图中加载数据在ngrepeat中单击

0 个答案: