首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在加载AngularJS部分模板后应用jquery

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

Stack Overflow用户
提问于 2014-03-09 05:58:55
回答 7查看 28.3K关注 0票数 19

我有一个简单的网站,实现了jQuery,以便创建一个滑块与一些图像在Index.html的顶部横幅。

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

  1. Header
  2. Footer
  3. Top Banner

如果我在原始版本中运行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效果,真的是一团糟。

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

有什么线索可以解决这个问题吗?

感谢任何人的帮助。

EN

回答 7

Stack Overflow用户

发布于 2014-08-05 08:21:52

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

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的方式定义您想要做的事情,作为函数的一部分,如下所示:

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

讲得通?

票数 20
EN

Stack Overflow用户

发布于 2014-08-27 03:35:57

其他提供的答案可以工作,但它们绑定到控制器,因此不具有可伸缩性和可重用性。

要像注释中提到的那样使用真正的"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:

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

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

我建议阅读这篇excellent article by Dan Wahlin,了解如何创建自定义指令以及如何充分利用它们的强大功能。

票数 11
EN

Stack Overflow用户

发布于 2017-03-16 22:58:24

我也有同样的问题,我在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()会在angular加载完包含的内容后加载脚本。

祝大家编码愉快!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22275590

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档