angularjs - Run javascript function when ui-router state changes? - Stack Overflow

admin管理员组

文章数量:1220945

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

$(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.

What should i be doing, instead of the above?

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

$(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.

What should i be doing, instead of the above?

• javascript
• angularjs
• angular-ui-router

Share Improve this question Follow asked Mar 8, 2016 at 12:40 brotherbrother 8,15199 gold badges3838 silver badges6262 bronze badges 6

• is there a reason that you wrap the function in $()? – Zamboney Commented Mar 8, 2016 at 12:46
• None other, than it uses jQuery. – brother Commented Mar 8, 2016 at 12:48
• do you have access to the $routeChangeStart – Zamboney Commented Mar 8, 2016 at 12:53
• Not within the above function where it currently sits. But i have within my Angular app i would presume? – brother Commented Mar 8, 2016 at 12:54
• 1 Write the function directly,i.e. instead of $(function(){ function doSomething() { /* ....... */ } }); do function doSomething() {/* ..... */}. But it would pose a security risk! I would not suggest that, as @Zamboney mentioned, its quick and dirty ... :) – Dave Amit Commented Mar 8, 2016 at 13:09

 |  Show 1 more comment

3 Answers 3

Sorted by: Reset to default 8

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.

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.

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.

Hope this helps!

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

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

本文标签： angularjsRun javascript function when uirouter state changesStack Overflow