javascript - Angular onEnter ui.router 方法无法正常工作

Question

我有一个 Angular 应用程序，其 ui.router 模块有一个 onEnter 方法。我想在单击状态菜单项并且状态更改时调用函数。但现在我的应用程序无法正常工作。例如。我访问 app.com/what 并在加载应用程序时控制台打印所有 5 行，然后单击菜单后不会打印任何内容。我读过这个here

There are also optional 'onEnter' and 'onExit' callbacks that get called when a state becomes active and inactive respectively.

页面加载时我的控制台:

[debug] changeMenu item_id:1495
[debug] changeMenu item_id:1342
[debug] changeMenu item_id:1344
[debug] changeMenu item_id:1346
[debug] changeMenu item_id:1346

我的目标是仅在单击菜单项或在 init 步骤时调用 changeMenu 函数。

          var changeMenu = function(itemID){
              console.log("[debug] changeMenu item_id:"+itemID);
              // for menu css
              $("#nav_menu li.active").removeClass("active");
              $("#nav_menu li#menu-item-"+itemID).addClass('active');
              $('#nav_menu').spasticNav();
          }
          //
          // Now set up the states
          $stateProvider
            .state('index', {
              url: "/",
              templateUrl: "main.html",
              onEnter: changeMenu(1495)
            })
            .state('what', {
              url: "/what",
              templateUrl: "what.html",
              onEnter: changeMenu(1342)
            })
            .state('where', {
              url: "/where",
              templateUrl: "where.html",
              onEnter: changeMenu(1344)

            })
            .state('cost_rent', {
              url: "/cost_rent",
              templateUrl: "cost_rent.html",
              onEnter: changeMenu(1346)

            })
            .state('cost_sell', { 
              url: "/cost_sell",
              templateUrl: "cost_sell.html",
              onEnter: changeMenu(1346)
            })
        });

Answer 1

当您使用 onEnter 时，它需要一个闭包(回调函数)。onEnter:changeMenu(1495) 不是回调函数，它执行该函数，这就是为什么所有 5 条调试消息一起显示的原因。所以你可以做的是这样的:

$stateProvider
  .state('index', {
    url: "/",
    templateUrl: "main.html",
    onEnter: function() {
      changeMenu(1495);
    }
  })