在AngularJS之后加载jQuery [重复]答案

【问题标题】：Loading jQuery after AngularJS [duplicate]在AngularJS之后加载jQuery [重复]
【发布时间】：2017-10-14 10:34:34
【问题描述】：

我正在尝试在页面加载完成后运行一个小的 jQuery sn-p，但是即使页面完全加载后，一些 AngularJS 代码也没有呈现。

页面加载后，jQuery 在控制台中工作。

这是我正在尝试的 jQuery：

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

但它仍然没有发生

克隆按钮不是普通按钮，它是一个角按钮

`<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>`

我尝试将文档准备好并一起加载，但仍然没有成功

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

我更喜欢 javascript/jQuery 解决方案而不是 Angular 解决方案。

【问题讨论】：

angular js 是一个成熟的 javascript 框架。我怀疑您是否需要 jquery 来完成此操作，老实说，如果您在应用程序中仅使用 angular 并且不尝试将其与 jquery 混合使用，它会变得更容易和更简单。在进行网络调用时尤其如此。
如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，则 angular.element 委托给 AngularJS 的内置 jQuery 子集，称为“jQuery lite”或 jqLite。 angular.element("a:contains('Clone')").parent().parent().parent().prepend(angular.element("#clone_external")); 或许？

标签： javascript jquery angularjs

【解决方案1】：

在与该视图对应的角度控制器中，您可以执行以下操作：

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

很少有精确度：Angular 已经有其内置版本的 jQuery (jQlite)，你应该尽可能使用 jQlite 而不是 jQuery。此外，您应该避免在控制器中使用 jQlite/jQuery sn-ps，我很确定有一些“angularjs 解决方案”更适合您的情况。

【讨论】：

从技术上讲，在控制器执行时 DOM 已经准备就绪。这完全是多余的。
是的，其实你是对的，$viewContentLoaded 事件更合适