Question

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

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

标题
页脚
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效果，真是一团糟。

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

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

感谢任何帮助。

Answer 1

指定路线时，您还可以指定控制器，因此您的路线如下所示：

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

有意义吗？

Answer 2

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

要做真正的＆＃34; Angular＆＃34;在评论中提到的方式，你应该使用一个指令。这样做的好处是，您可以使用相同的代码创建多个实例，并且可以将属性传递给指令逻辑，以便自定义＆＃34;指令。以下是我使用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有关创建自定义指令以及如何充分利用它们的权力。

Answer 3

我遇到了同样的问题，我在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（）设法在加载包含的内容完成角度后加载脚本。

快乐编码每个人！

Answer 4

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

示例：partials / menu.html

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

Answer 5

我有同样的问题，我在简单的html页面中运行Jquery光滑的滑块它工作正常。它是如何工作的基本上是将slick.min.js文件包含在jquery.min.js文件下面，然后在脚本标记中，你需要使用例如类似的选项来初始化插件。

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

现在回到这个问题，当我将Angular JS添加到我的页面并制作页面的部分内容然后回到浏览器查看天气时页面工作正常与否，页面工作正常，除了滑块。然后我尝试将那些slick.min.js和插件初始化移动到局部，它起作用了：）

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

Answer 6

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

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

Answer 7

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

将下面的代码放在您放置<script> document.write('<script src="vendor/61345/js/script.js"><\/script>'); </script>代码的位置。

{{1}}

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

7 个答案: