加载AngularJS部分模板后如何应用jquery [英] How to apply jquery after AngularJS partial template is loaded

问题描述

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

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

现在，我想使用 AngularJS，因此我将 HTML 代码分解为单独的部分.

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

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

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

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

在应用 AngularJS 模式时，我将顶部横幅 HTML 移动到部分 html，然后将 ng-view 应用到顶部横幅最初所在的 div.

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

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

当我刷新页面时，滑块不起作用，呈现为没有任何 jQuery 效果的简单 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 插件，通常由 document.ready 激活.但是当角负载在 ng-view 中部分时不会触发此事件.如何调用此事件来初始化 jQuery 插件?

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?

知道如何解决这个问题吗?

Any clue how to fix this?

感谢任何帮助.

推荐答案

当你指定你的路由时，你也可以指定一个控制器，所以你的路由看起来像这样:

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

现在，你可以在每个控制器中定义你想要做什么，jquery-wise，作为函数的一部分，像这样:

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

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();
}]);

有意义吗?

这篇关于加载AngularJS部分模板后如何应用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！