如何申请AngularJS后jQuery的局部模板被加载 [英] How to apply jquery after AngularJS partial template is loaded

问题描述

我有一个简单的网站，为了创建一个滑块与中的index.html顶部横幅一些图像实现的jQuery。

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 code到单独的谐音。

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-视图到顶部的横幅最初位于股利。

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

在我刷新滑块不工作的页面，呈现为简单的HTML，没有任何效果的jQuery，真是一团糟。

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。但是，此事件不火，当负​​载角局部纳克中的视图。我怎样才能调用此事件来初始化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?

鸭preciate任何帮助。

Appreciate any help.

推荐答案

在您指定的路线，你也可以指定一个控制器，所以你的路线是这样的：

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的明智了每个控制器内部定义，作为一个功能的一部分，是这样的：

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屋！