0

I need to delay AngularJS scripts from running so I can set up my application first. I need to initialize the application with ng-app="app". I want to add that attribute to the < body >

< body ng-app="app" >< /body >

 wp_enqueue_script('plugin-setup', plugin_dir_url( __FILE__ ).'js/plugin-setup.js', array('jquery'), null, true);

plugin-set.js

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementsByTagName("body")[0].setAttribute("ng-app", "app");
});

After that is set up I can run my Angular Scripts:

class pluginClass{

function pluginInit(){
    add_action( 'wp_enqueue_scripts', array( $this, 'scriptThings' ) );
}

function scriptThings(){
    wp_enqueue_script('angular-core', plugin_dir_url( __FILE__ ).'js/vendor/angular/angular.js', array('jquery'), null, true);
    wp_enqueue_script('angular-resource', plugin_dir_url( __FILE__ ).'js/vendor/angular-resource/angular-resource.js', array('jquery'), null, true);
    wp_enqueue_script('app', plugin_dir_url( __FILE__ ).'js/app.js', array(), null, true);
    wp_enqueue_script('app-controller', plugin_dir_url( __FILE__ ).'js/controllers/app_controller.js', array(), null, true);
    wp_enqueue_script('imagetile-factory', plugin_dir_url( __FILE__ ).'js/resource/imageTile_factory.js', array(), null, true);
}

}

$my_class = new pluginClass;

add_action('init', array($my_class, 'pluginInit'));

Is there a way to delay the Angular scripts from loading within my plugin.php*?

1

I think you should use setTimeout to pause the execution of the script without blocking the UI.

setTimeout(function(){

  //your code to be executed after 2 seconds

}, 2000);

So your code will become.

setTimeout(function(){

    document.addEventListener("DOMContentLoaded", function(event) {
      document.getElementsByTagName("body")[0].setAttribute("ng-app", "app");
    });    

}, 2000);

This will delay script execution for 2 seconds. You can change this value based on your requirements.

EDIT

On second thought, I think it would be better if you check for AngularJS is loaded in the current page before initializing your app.

function checkAngular() {
  if ( window.angular ) {

    // your code to be executed
    document.addEventListener("DOMContentLoaded", function(event) {
      document.getElementsByTagName("body")[0].setAttribute("ng-app", "app");
    });    

  } else {
    window.setTimeout( checkAngular, 1000 );
  }
}
checkAngular();

So what does this code do? It checks if AngularJS is already being loaded successfully. If AngularJS is initialized then it will execute the code otherwise it will delay for 1 sec and check again until AngularJS is loaded.

0

change the action to:

add_action('init', array($my_class, 'pluginInit','40'));

That tells the action to run much later in the queue, you could also check if the other script has been enqueued by using wp_script_is e.g.

 $handle = 'plugin-setup.js';
 $list = 'enqueued';
 if (wp_script_is( $handle, $list )) {
  // enqueue scripts here
 }

Hope that points you in the right direction

  • Will this delay from loading? – Robert hue Oct 16 '15 at 8:32
  • it will make sure it runs the enqueue after the other enqueues above, so it makes sure that the other script is loaded before it loads the angular ones. – Gareth Gillman Oct 16 '15 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.