Angular onEnter ui.router方法无法预期

时间:2016-04-08 06:44:09

标签: javascript angularjs

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

  

还有可选的' onEnter'和' onExit'当状态分别变为活动和非活动状态时调用的回调。

页面加载时

我的控制台:

[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

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

          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)
            })
        });

1 个答案:

答案 0 :(得分:2)

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

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