Question

图片： enter image description here

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" }
                  ]
          }

路线提供商＆＃34;否则＆＃34;这样做：

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

情景[问题：]

我在收件箱页面上，点击图表菜单，在点击选项之前，我的视图将恢复为默认的信息中心页面。

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

我想要的：要保留在我点击的任何页面上（在这种情况下是收件箱页面），单击任何其他具有子菜单的菜单项（例如图表），而不是从我目前的收件箱视图中移开我的视图上。

先谢谢

Answer 1

听起来你可能试图取消Bubble而不是preventDefault，但最好将expand元素移出锚点以避免指令/事件冲突。那可能吗？

Answer 2

我看到了几个问题。首先，看起来您在vm.expandNav中检查错误的网址值。您正在检查url是否为空，但您的图表网址设置为'#'其次，您需要在检查成功后阻止默认值。

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}}">

Answer 3

<强> SOLUTION：

控制器中的正确代码：

    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>

AngularJs - 在不禁用＆＃34;展开菜单的情况下无法取消路线更改＆＃34;

3 个答案: