7

I am trying to run a small jQuery snippet after the complete page load but some AngularJS code is not rendered even after the page is loaded completely.

jQuery works in console after page load.

This is the jQuery am trying:

jQuery("a:contains('Clone')").parent().parent().parent().prepend(jQuery("#clone_external"));

But still its not happening

The clone button is not a normal button, it is an angular button 

`<div ng-init="projectPath='projects.srk_test_pro_ject';artifactId='artf3596';folderId='tracker1787';folderPath='projects.srk_test_pro_ject/tracker.ACR';returnUrlKey='1494858605684';hasCreatePermission='true'" data-ng-include="'/ctf/js/saturn/tracker/cloneArtifact.html'" ng-bindable="" class="Middle ng-scope"><div data-ng-controller="CloneCtrl" class="ng-scope"><a href="#" data-ng-show="!disableCloneBtn" data-ng-click="clone()" data-i18n-content="{bundle: 'tracker', key: 'clone/label'}" class="">Clone</a></div></div>`

I tried document ready and load together but still no luck

jQuery(document).ready(function() {
   jQuery(window).load(function() {
     jQuery("a:contains('Clone')").parent().parent().parent()
     .prepend(jQuery("#clone_external"));
   });
});

I would prefer a javascript/jQuery solution over an angular solution.

Hodrobond
  • 1,665
  • 17
  • 18
sathishkumar
  • 337
  • 1
  • 3
  • 10
  • 4
    angular js is a full blown javascript framework. I doubt you need jquery to accomplish this, and to be honest its gonna be easier and simpler if you use only angular in the app and not try to mix it with jquery. This is especially true when making network calls. – victor May 15 '17 at 15:12
  • If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to AngularJS's built-in subset of jQuery, called "jQuery lite" or jqLite. `angular.element("a:contains('Clone')").parent().parent().parent().prepend(angular.element("#clone_external"));` perhaps? – Tim Vermaelen May 15 '17 at 15:14

1 Answers1

0

Inside your angular controller corresponding to that view, you can do the following:

.controller('MyCtrl', [function($scope) {
    $scope.$on('$viewContentLoaded', function(){
        // here your jQuery code
    });
}]);

Few precisations: angular already has its builtin version of jQuery (jQlite) and you should use jQlite instead of jQuery every time that is possible. Moreover, you should avoid to use jQlite/jQuery snippets inside controllers and I am pretty sure that there is some "angularjs solution" which is more appropriate for your case.

quirimmo
  • 9,800
  • 3
  • 30
  • 45