当ui-router状态改变时运行javascript函数？

In a Angular App i am using ui-router to handle navigation etc. In a separate script file, i have a function like so;

在Angular应用程序中我使用ui-router来处理导航等。在一个单独的脚本文件中,我有一个像这样的函数;

$(function () {
  function doSomething(){
    if ($('.thisclass').length) {
      $('.thisclass').css({ 'height': someHeight });
    }
  }
});

My problem is, that whenever the state changes, i want to run the above function. But as it is not part af any Angular function, i get an error when i reference it, as i cannot find it.

我的问题是,每当状态改变时,我想运行上面的功能。但是因为它不是任何Angular函数的一部分,所以当我引用它时会出现错误,因为我无法找到它。

What should i be doing, instead of the above?

我应该做什么,而不是上述?

3 个解决方案

#1

Here is how I would do.

我就是这样做的。

app.js

(function(){
    angular.module('app',[]);

    /* other code like configuration etc */
})();

SomeService.js

(function(){    
    angular.module('app');
       .factory('someService',function(){
            return {
                     doSomething: function(){
                        $('.container-fluid').css('display', 'none');
                     }
                 };
       });
})();

app.run.js

(function(){
  angular.module('app')
  //Inject your service here
  .run(function($rootScope,someService){ 
    //Look for successful state change.
    //For your ref. on other events.
    //https://github.com/angular-ui/ui-router/wiki#state-change-events
    $rootScope.$on('$stateChangeSuccess', function() {
      //If you don't wanna create the service, you can directly write
      // your function here.
      someService.doSomething();
    });
  })
})();

Always wrap your angular code within IIFE it wraps everything in closure and prevents leaks as well as provides a layer of security.

始终将您的角度代码包装在IIFE中,它将所有内容包装在封闭中并防止泄漏并提供一层安全性。

Hope this helps!

希望这可以帮助!

#2

Hello you can also add your jquery code into the onEnter:function() of your state , as onEnter is executed each time you change the state and a controller is loaded.

您好,您也可以将您的jquery代码添加到您所在州的onEnter:function()中,因为每次更改状态并加载控制器时都会执行onEnter。

example(a login state):

.state('login', {
                url: '/login',
                controller: 'LoginCtrl',
                templateUrl: '/assets/modules/login/login.html',
                resolve: {
                    user: ['authService', '$q', function (authService, $q) {
                        if (authService.user) {
                            return $q.reject({authorized: true});
                        }
                    }]
                },
                onEnter: function () {
                    //i hide header tabs, you can add your code here
                    $('.container-fluid').css('display', 'none');
                },
                onExit: function () {
                   //onExit is executed when we leave that state and go to another
                }
            });

Hope helps, good luck.

希望有所帮助,祝你好运。

#3

If you are the one controlling the state changes via $state.go() for example, you can amend it:

如果您是通过$ state.go()控制状态更改的人,您可以修改它:

$state.go('somewhere', { 'place': 'somewhere' }).then(() => {
  // write your function here
});