Question

使用angularJS我正在尝试构建一个将用作菜单的列表。我有一个JSON数组，必须根据JSON字段的条件构建菜单：

在我的控制器中，现在，我有这个：

获取JSON：

$scope.cartoList = [];
$http.get('frList.json')
.success(function(data) { 
    $scope.cartoList = data;
    $scope.buildMenu();
})
.error(function(data) { 
    console.log("Error while getting json.");
})

初始化菜单列表：

    $scope.initMenu = function () {
    for (var i = 0; i < $scope.cartoList.length; i++) {
        if ($scope.cartoList[i].informationSystem != "" && $scope.ISList.indexOf($scope.cartoList[i].informationSystem) === -1)
            $scope.ISList.push($scope.cartoList[i].informationSystem);
        if ($scope.cartoList[i].macroProcess != "" && $scope.macroProcessList.indexOf($scope.cartoList[i].macroProcess) === -1)
            $scope.macroProcessList.push($scope.cartoList[i].macroProcess);
    }
}

JSON示例：

[
{   "area" : "Middle",
    "block" : "Position",
    "created" : "2015-6-15",
    "defaultZoom" : "1",
    "displayName" : "Architecture",
    "fileName" : "AA_APK",
    "informationSystem" : "A Group",
    "lastupdate" : "2015-6-15",
    "level" : "Block",
    "macroProcess" : "",
    "type" : "AA"
  },
  { "area" : "",
"block" : "",
"created" : "2015-6-15",
"defaultZoom" : "1",
"displayName" : "Processus order VM",
"fileName" : "AM_Process_order_VM",
"informationSystem" : "A Group",
"lastupdate" : "2015-6-15",
"level" : "",
"macroProcess" : "Deal period",
"type" : "AM"
 },
 ...
]

HTML：

<ul class="sidebar-menu slimscroll">
<li class="treeview" ng-repeat="IS in ISList"><a href="javascript:void(0)"> <i class="fa fa-folder"></i>{{IS}} <i class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">

          <li class="treeview"><a href="javascript:void(0)"> <i class="fa fa-folder"></i>Processus<i class="fa fa-angle-left pull-right"></i></a>
            <ul class="treeview-menu">
              <li class="treeview" ng-repeat="mProcess in macroProcessList"><a href="javascript:void(0)"><i class="fa fa-folder"></i>{{mProcess}}<i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                  <li ng-repeat="carto in cartoList" ng-if="carto.type == 'AM' && carto.macroProcess == mProcess && carto.informationSystem == IS"><a href="javascript:void(0)" ng-click="changeSVG(carto.fileName)"><i class="fa fa-sitemap"></i>{{carto.displayName}}</a></li>
                </ul>
              </li>
            </ul>
          </li>

          <!-- Other <li> will come here -->

        </ul>
</li>
</ul>

问题是当我点击IS元素时，菜单不会下拉。

treeview和treeview-menu来自我正在使用的模板，您可以在此处找到：https://almsaeedstudio.com/themes/AdminLTE/index.html

但我不认为这是相关的。

编辑： 菜单下拉列表由JQuery处理，因此它可能是相关的。也许由于JQuery和angular之间存在一些冲突，事件没有被捕获？

这应该是相关部分：

$.AdminLTE.tree = function (menu) {
var _this = this;

$("li a", $(menu)).on('click', function (e) {
  //Get the clicked link and the next element
  var $this = $(this);
  var checkElement = $this.next();

  //Check if the next element is a menu and is visible
  if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
    //Close the menu
    checkElement.slideUp('normal', function () {
      checkElement.removeClass('menu-open');
      //Fix the layout in case the sidebar stretches over the height of the window
      //_this.layout.fix();
    });
    checkElement.parent("li").removeClass("active");
  }
  //If the menu is not visible
  else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
    //Get the parent menu
    var parent = $this.parents('ul').first();
    //Close all open menus within the parent
    var ul = parent.find('ul:visible').slideUp('normal');
    //Remove the menu-open class from the parent
    ul.removeClass('menu-open');
    //Get the parent li
    var parent_li = $this.parent("li");

    //Open the target menu and add the menu-open class
    checkElement.slideDown('normal', function () {
      //Add the class active to the parent li
      checkElement.addClass('menu-open');
      parent.find('li.active').removeClass('active');
      parent_li.addClass('active');
      //Fix the layout in case the sidebar stretches over the height of the window
      _this.layout.fix();
    });
  }
  //if this isn't a link, prevent the page from being redirected
  if (checkElement.is('.treeview-menu')) {
    e.preventDefault();
  }
});
};

Answer 1

我认为你对angularJS有一点误解，以及它能为你做些什么。你需要很长的路径来显示你的菜单，它应该让你的生活变得更轻松，我想我可能会澄清角度可以做些什么，以便让你的菜单列表=）。

AngularJS具有ng-repeat属性，允许您访问控制器中的数组并显示其中每个元素的内容。像：

<ul>
    <li ng-repeat="element in list">
        <div class="{{element}}">{{element}}</div>
    </li>
</ul>

这使您可以为范围中li变量中的每个元素创建一个list元素。

使用此类功能可让您在开发阶段更早地看到菜单。根据我在您的场景中看到的，每个元素都有两种可能的结果：它是菜单还是不是，元素根据它而变化。看看这个小提琴来掌握你能做的事情：

http://jsfiddle.net/4xkvq7dj/1/

此示例非常简单，因此您可以了解可以执行的操作的基础知识。从那以后就可以找到你想要完成的事情了。使用DOM在控制器中构建菜单不是有角度的方式，它真的很快就会变得混乱。你可以在HTML中使用ng-repeat和其他angular指令来实现很多功能，因此视图逻辑保留在view =）中。

祝你的项目好运！

Answer 2

所以是的，问题来自jQuery处理角度应该有的事件。

要解决此问题，您可以将ng-click="toggleMenu($event)"添加到<a>

内的<li class="treeview"...

然后添加控制器：

    $scope.toggleMenu = function (e) {
    var elem = angular.element(e.currentTarget);
    var $this = elem ;
    var checkElement = $this.next();

    //Check if the next element is a menu and is visible
    if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
    //Close the menu
    checkElement.slideUp('normal', function () {
        checkElement.removeClass('menu-open');
        //Fix the layout in case the sidebar stretches over the height of the window
        //_this.layout.fix();
    });
    checkElement.parent("li").removeClass("active");
    }
    //If the menu is not visible
    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
        //Get the parent menu
        var parent = $this.parents('ul').first();
        //Close all open menus within the parent
        var ul = parent.find('ul:visible').slideUp('normal');
        //Remove the menu-open class from the parent
        ul.removeClass('menu-open');
        //Get the parent li
        var parent_li = $this.parent("li");

        //Open the target menu and add the menu-open class
        checkElement.slideDown('normal', function () {
        //Add the class active to the parent li
        checkElement.addClass('menu-open');
        parent.find('li.active').removeClass('active');
        parent_li.addClass('active');
        //Fix the layout in case the sidebar stretches over the height of the window
        //  _this.layout.fix();
        });
    }
    //if this isn't a link, prevent the page from being redirected
    if (checkElement.is('.treeview-menu')) {
        e.preventDefault();
    }
}

从JSON数组生成HTML列表

2 个答案: