如何在加载AngularJS部分模板后应用jquery
我有一个简单的网站，它实现了jQuery，以便在Index.html顶部横幅中创建一些带有一些图像的Slider。
现在，我想使用AngularJS，因此我将HTML代码分解为单独的部分。
- 头
- 页脚
- 顶级横幅
如果我在原始版本中运行Index.html（不应用AngularJS模式），那么我可以看到滑块工作正常。
在应用AngularJS模式时，我将顶部横幅HTML移动到部分html，然后将ng-view应用于顶部横幅最初所在的div。
var app = angular.module('website', ['ngRoute']); app.config(function($routeProvider) { $routeProvider. when('/about',{templateUrl:'app/partials/about.html'}). when('/contact',{templateUrl:'app/partials/contact.html'}). otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'}) }); 当我刷新页面滑块不工作时，渲染为简单的html而没有任何jQuery效果，真是一团糟。
这个部分有一些jQuery插件，通常由document.ready激活。 但是当角度载荷部分在ng视图中时，此事件不会触发。 如何调用此事件来初始化jQuery插件？
有任何线索如何解决这个问题？
感谢任何帮助。
指定路径时，还可以指定控制器，因此路径如下所示：
var app = angular.module('website', ['ngRoute']); app.config(function($routeProvider) { $routeProvider. when('/about',{templateUrl:'app/partials/about.html', controller: 'aboutCtrl'}). when('/contact',{templateUrl:'app/partials/contact.html', controller: 'contactCtrl'}). otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html', controller: 'homeCtrl'}) });
现在，您可以在每个控制器内部定义您想要执行的操作，jquery-wise，作为函数的一部分，如下所示：
angular.module('website').controller('aboutCtrl', ['$scope', function ($scope) { $scope.load = function() { // do your $() stuff here }; //don't forget to call the load function $scope.load(); }]);
合理？
其他提供的答案将起作用，但它们绑定到控制器，因此不具有可扩展性和可重用性。
要在评论中提到真正的“Angular”方式，您应该使用指令。 这样做的好处是，您可以使用相同的代码创建多个实例，并可以将属性传递给指令逻辑以“自定义”该指令。 这是我使用bxSlider插件使用它的一种方式的示例：
JS：
app.directive('slider', ['$rootScope', function($rootScope) { return { restrict: 'EA', templateUrl: '/path/to/template', link: function(scope, iElement, attrs) { //attrs references any attributes on the directive element in html //iElement is the actual DOM element of the directive, //so you can bind to it with jQuery $(iElement).bxSlider({ mode: 'fade', captions: true }); //OR you could use that to find the element inside that needs the plugin $(iElement).find('.bx-wrapper').bxSlider({ mode: 'fade', captions: true }); } }; }]);
HTML：
在指令模板中，您可以使用滑块包装器和幻灯片，您可以使用绑定到范围数据的ng-repeat动态构建。
我建议阅读Dan Wahlin关于创建自定义指令以及如何充分利用它们的强大function的优秀文章 。
我遇到了同样的问题，我在ng-include中加载了一些导航链接，并且我在index.html上调用了一个脚本文件，其中包含jquery指令以使链接处于活动状态，而我没有看到包含的内容。
我尝试了上述所有解决方案，但由于某些原因，它们都没有为我工作。 当内容未包含在内（直接在index.html中）时，jquery会很好地启动，但一旦包含它就会停止识别我的元素。
所以我只是将我的指令包装在一个setTimeout（）函数中就可以了！ 也许它对你也有用吗？
setTimeout(function() { $("nav ul li").click(function() { $("nav ul li").removeClass('active'); $(this).addClass('active'); }); });
不知何故，setTimeout（）设法加载脚本AFTER角度完成后加载包含的内容。
大家快乐编码！
指令当然是一个不错的选择，但你也可以为任何部分添加一个控制器，它将在部分加载后执行所有任务（如果需要，也可以使用jQuery）：
示例：partials / menu.html
...
我有同样的问题，我在简单的html页面中运行Jquery光滑的滑块，它工作正常。 它是如何工作的基本上是通过在jquery.min.js文件下面包含slick.min.js文件，然后在脚本标签中你需要用例如eg等选项初始化插件
$('.items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 });
现在回到这个问题，当我将Angular JS添加到我的页面并制作页面的部分内容然后回到浏览器查看天气页面工作正常与否时，页面工作正常，除了滑块。 然后我试图将那些slick.min.js和插件初始化移动到局部，它工作:)
它是如何工作的我不知道原因，因为我是Angular的新手，但它起作用了，我仍然想知道原因。
我知道它是一个旧线程但只是为了完成，您可以使用以下JQuery代码。 它被称为事件委派。
$("#anyDivOrDocument").on('click', '#targetDiv', function(event) { event.preventDefault(); alert( 'working' ); });
我买了一个html5模板，并试图与我的angularJS网络应用程序集成。 我遇到了同样的问题。 我解决了它：
将下面的代码放在您放置代码的位置。