jQuery 加载AngularJS部分模板后如何应用jquery

How to apply jquery after AngularJS partial template is loaded

提问by VAAA

I have a simple website that implements jQuery in order to create a Slider with some images in the Index.html top banner.

我有一个简单的网站，它实现了 jQuery，以便在 Index.html 顶部横幅中创建带有一些图像的 Slider。

Now, I want to use AngularJSso I'm breaking the HTML code into separate partials.

现在，我想使用AngularJS，所以我将 HTML 代码分解成单独的部分。

1. Header
2. Footer
3. Top Banner

1. 标题
2. 页脚
3. 顶部横幅

If I run the Index.html in the original version (without applying AngularJS patterns) then I can see the slider working perfect.

如果我在原始版本中运行 Index.html（不应用 AngularJS 模式），那么我可以看到滑块工作正常。

When applying AngularJS patterns, I moved the top banner HTML to a partial html and then applied ng-viewto the div where the top banner is originally located.

在应用 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'})
});

When I refresh the page the slider is not working, is rendered as simple html without any jQuery effect, is really a mess.

当我刷新页面时，滑块不起作用，呈现为没有任何 jQuery 效果的简单 html，真是一团糟。

This partials has some jQuery plugins that usually activates by document.ready. But this event not fire when angular load partial in ng-view. How can i call this event to initialize jQuery plugins?

这个部分有一些 jQuery 插件，通常由 document.ready 激活。但是当角负载在 ng-view 中部分时不会触发此事件。如何调用此事件来初始化 jQuery 插件？

Any clue how to fix this?

任何线索如何解决这个问题？

Appreciate any help.

感谢任何帮助。

回答by Aaron

When you specify your routes, you can also specify a controller, so your routes would look like this:

当您指定路由时，您还可以指定一个控制器，因此您的路由将如下所示：

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'})
    });

Now, you can define inside each controller what you want to do, jquery-wise, as part of a function, like this:

现在，你可以在每个控制器中定义你想要做什么，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();
}]);

Make sense?

有道理？

回答by Sean Thompson

The other provided answers will work, but they are bound to controllers, and therefore not as scalable and reusable.

其他提供的答案将起作用，但它们绑定到控制器，因此不具有可扩展性和可重用性。

To do it the real "Angular" way as mentioned in the comments, you should be using a directive. The benefit to this is that you're able to create several instances with the same code, and can pass in attributes to the directive logic to "customize" the directive. Here's a sample of a way I've used it using bxSliderplugin:

要按照评论中提到的真正的“Angular”方式进行操作，您应该使用指令。这样做的好处是您可以使用相同的代码创建多个实例，并且可以将属性传递给指令逻辑以“自定义”指令。这是我使用bxSlider插件使用它的方式示例：

JS:

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:

HTML：

<div slider some-attibute="some-attribute"></div>

And inside your directive template you could have the slider wrapper and slides, which you could build dynamically using ng-repeat bound to scope data.

在您的指令模板中，您可以拥有滑块包装器和幻灯片，您可以使用绑定到范围数据的 ng-repeat 动态构建它们。

I'd recommend reading this excellent article by Dan Wahlinabout creating custom directives and how to fully harness they're power.

我建议您阅读Dan Wahlin 撰写的关于创建自定义指令以及如何充分利用它们的强大功能的优秀文章。

回答by Maranaho

I had the same problem, I was loading some nav links in a ng-include and I have a script file called on my index.html with jquery instructions to make links active and It i not see the included content.

我遇到了同样的问题，我在 ng-include 中加载了一些导航链接，我在 index.html 上调用了一个脚本文件，其中包含 jquery 指令以使链接处于活动状态，但我看不到包含的内容。

I tried all of the above solutions and for some reasons, none of them worked for me. When the content is not included (straight in the index.html) jquery kicks in fine but once included it stopped recognizing my elements.

我尝试了上述所有解决方案，但由于某些原因，没有一个对我有用。当不包含内容时（直接在 index.html 中）jquery 可以正常工作，但是一旦包含它就停止识别我的元素。

So I simply wrapped my instructions in a setTimeout() function and it worked! Maybe it'll work for you too?

所以我简单地将我的指令包装在一个 setTimeout() 函数中并且它起作用了！也许它也适合你？

setTimeout(function() {
    $("nav ul li").click(function() {
        $("nav ul li").removeClass('active');
        $(this).addClass('active');
    });
});

Somehow the setTimeout() manages to load the script AFTER angular is done loading included content.

以某种方式 setTimeout() 设法在 angular 加载包含的内容后加载脚本。

Happy coding everyone !

祝大家编码愉快！

回答by USAZ

I bought a html5 template and tried to integrate with my angularJS web app. I encountered the same issue. I solved it using:

我买了一个 html5 模板并尝试与我的 angularJS Web 应用程序集成。我遇到了同样的问题。我使用以下方法解决了它：

Put the code below at where you put your <script src="vendor/61345/js/script.js"></script>code.

将下面的代码放在您放置<script src="vendor/61345/js/script.js"></script>代码的位置。

<script>
   document.write('<script src="vendor/61345/js/script.js"><\/script>');
</script>

回答by Gerfried

A Directive is certainly a good option, but you can also add a controller to any partial, which will perform all tasks (also with jQuery if you want) after the partial is loaded:

指令当然是一个不错的选择，但您也可以向任何部分添加一个控制器，它会在加载部分后执行所有任务（如果需要，也可以使用 jQuery）：

Example: partials/menu.html

示例：partials/menu.html

<div ng-controller="partialMenuCtrl">
   ...
</div>

回答by Usman Khan

I had the same issue, I was running Jquery slick slider in simple html page it was working fine. How it works basically by including the slick.min.js file underneath the jquery.min.js file and then in script tags you need to initialize the plugin with options like e.g.

我有同样的问题，我在简单的 html 页面中运行 Jquery slick 滑块，它工作正常。它的工作原理基本上是通过在 jquery.min.js 文件下包含 slick.min.js 文件，然后在脚本标签中，您需要使用例如以下选项初始化插件

$('.items').slick({
   infinite: true,
   slidesToShow: 3,
   slidesToScroll: 3
});

now coming back to the issue, when I added Angular JS to my page and made partials of the page and then went back to the browser to check weather the page was working fine or not, the page was working fine except the slider. Then I tried to move those slick.min.js and plugin initialization to the partials, and it worked :)

现在回到这个问题，当我将 Angular JS 添加到我的页面并制作页面的部分，然后返回浏览器检查页面是否正常工作时，页面工作正常，除了滑块。然后我尝试将那些 slick.min.js 和插件初始化移动到部分，并且它起作用了:)

How it worked I don't know the reason, since I am new to Angular but it worked and I am still wondering the reason.

它是如何工作的我不知道原因，因为我是 Angular 的新手，但它有效，我仍然想知道原因。

回答by Taha

I know it is an old thread but just for the sake of completion, you can use the following JQuery code. It is called event Delegation.

我知道这是一个旧线程，但只是为了完成，您可以使用以下 JQuery 代码。它被称为事件委托。

$("#anyDivOrDocument").on('click', '#targetDiv', function(event) {
   event.preventDefault();
   alert( 'working' ); 
});