angularjs - AngularJs - 在不禁用“扩展菜单”的情况下无法取消路线更改

Question

图片：

的HTML：

// the ng-class allow the expansion of menu            
  <li class="{{menuItem.isActive}}" data-ng-repeat="menuItem in vm.menuItems" data-ng-class="{'': vm.expandedItem !== menuItem, 'expanded': vm.expandedItem === menuItem}" data-ng-click="vm.expandNav(menuItem, menuItem.url)"  style="cursor: pointer;">

  // click to go to next route
   <a href="{{menuItem.url}}">                     
      <span class="menu-item-parent">{{menuItem.name}}</span>
        <b data-ng-if="menuItem.subMenu.length > 0 ">
          <em class="fa" data-ng-class="{'fa fa-expand-o': vm.expandedItem !== menuItem, 'fa fa-collapse-o': vm.expandedItem === menuItem}">
                    </em>
                </b>
            </a>   

展开菜单代码：

    vm.expandNav = function (item, url) {
        if (url == '') {
            if (item !== vm.expandedItem) {
                vm.expandedItem = item;
            } else {
                vm.expandedItem = null;
            }
        }
    };

一些数据：

    vm.menuItems = [
          { name: "Dashboard", url: "/", icon: "fa-home", isActive: "active" },
          { name: "Inbox", url: "/inserts/inbox", icon: "fa-inbox" },
          { name: "Graphs", url: "#", icon: "fa-bar-chart-o",
              subMenu:
                  [
                      { name: "Flot Charts", url: "/inserts/flot" },
                      { name: "Morris Charts", url: "/inserts/morris" },
                      { name: "Inline Charts", url: "/inserts/inline-charts" }
                  ]
          }

路线提供者“否则”这样做：

        .otherwise({
            templateUrl: '/app/html/inserts/dashboard.html',
            controller: 'RouteCtrl'
        });

场景[问题：]

我在收件箱页面上，单击图表菜单，在单击选项之前，我的视图恢复到默认仪表板页面。

我尝试使用 $locationChangeStart 来阻止默认值，但这会阻止菜单扩展，因此我可以看到子菜单。

我想要什么：要留在我单击的任何页面（在本例中为收件箱页面），单击任何其他具有子菜单（例如图形）的菜单项，并且不要让我的视图从当前所在的收件箱视图中移开。

预先感谢

Answer 1

解决方案：

控制器中的正确代码：

    vm.expandNav = function (item, url) {
        if (url === '#') {
            event.preventDefault();

            if (item !== vm.expandedItem) {
                vm.expandedItem = item;
            } else {
                vm.expandedItem = null;
            }
        }
    };

正确的html：

    <ul>
        <li class="{{menuItem.isActive}}" data-ng-repeat="menuItem in vm.menuItems" data-ng-class="{'': vm.expandedItem !== menuItem, 'expanded': vm.expandedItem === menuItem}" data-ng-click="vm.expandNav(menuItem, menuItem.url)" style="cursor: pointer;">
            <a ng-href="{{menuItem.url}}">
                <i class="fa fa-lg fa-fw {{menuItem.icon}}"></i>
                <span class="menu-item-parent">{{menuItem.name}}</span>
                <b data-ng-if="menuItem.subMenu.length > 0 ">
                    <em class="fa" data-ng-class="{'fa fa-expand-o': vm.expandedItem !== menuItem, 'fa fa-collapse-o': vm.expandedItem === menuItem}">
                    </em>
                </b>
            </a>
            <ul data-ng-class="{'expanded': vm.expandedItem !== menuItem, 'expanded expandMe': vm.expandedItem === menuItem}" data-ng-click="vm.expandNav(menuItem, menuItem.url)">
                <li data-ng-repeat="subMenu in menuItem.subMenu">
                    <a ng-href="{{subMenu.url}}" style="cursor: pointer;">{{subMenu.name}}</a>
                </li>
            </ul>
        </li>
    </ul>

Answer 2

听起来您可能正在尝试取消Bubble而不是preventDefault，但最好将扩展元素移出锚点以避免完全指令/事件冲突。那可能吗？

Answer 3

我看到了几个问题。首先，看起来您正在检查vm.expandNav. 您正在检查 url 是否为空，但您的图形 url 设置为'#'Second，您需要在检查成功后阻止默认设置。

vm.expandNav = function (item, url) {
  if (url === '#') {
    event.preventDefault();

    if (item !== vm.expandedItem) {
      vm.expandedItem = item;
    } else {
      vm.expandedItem = null;
    }
  }
};

event.preventDefault()告诉子a标签它不应该访问它的href. 没有它，您的点击事件将运行，但点击将继续级联并将您的浏览器发送到http://<domain>/#. 这就是现在正在发生的事情，也是您otherwise选择它并将您发送到默认仪表板的原因。

此外，当您使用插值来填充时，href您应该使用ng-href：

<a ng-href="{{menuItem.url}}">