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

Angular onEnter ui.router method not work how expect

本文关键字：常工作 工作 ui onEnter router 方法 Angular      更新时间：2024-02-28

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

还有可选的"onEnter"answers"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

我的目标是只在单击菜单项或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)
            })
        });

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

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