AngularJS在部分页面中加载JQuery

Question

我有一个LAMP网站，我正尝试将其转换为基于MEAN构建的网站，并且将索引页面分为多个部分，以便可以使用SPA。 我对MEAN完全陌生，但是我正在慢慢学习和尝试问题，但是我现在停留在我在我的一个部件中使用的JQuery滑块插件上 ，并且在网站运行时不会在占位符中加载任何图像。 我知道我应该使用伪指令，以便在将部分页面加载到主页之后加载JQuery函数，因此为什么在滑块应位于的位置没有显示任何内容。

这是我的部分页面，其中包含用于单个图像的滑块的片段（目前，用于3张图像的“ li”块中有3个）： home.html

        <div id="pm-slider" class="pm-slider">
            <ul class="pm-slides-container" id="pm_slides_container">

                <li data-thumb="public/app/img/home/slide1a.jpg" class="pmslide_0"><img src="public/app/img/home/slide1.jpg" alt="img01" />

                        <div class="pm-holder">
                            <div class="pm-caption">
                                  <h1>Medical professionals</h1>
                                  <span class="pm-caption-decription">
                                    that you can trust
                                  </span>

                                  <a href="services.html" class="pm-slide-btn">learn more <i class="fa fa-plus"></i></a>
                            </div>
                        </div>
                </li>
              </ul>
           </div>

我的index.html文件包含div ng-view标签，所有home.html都应放置在该标签中。

app.js包含以下用于路由的代码，我知道这里应该使用JQuery插件的.directives函数

var digiProm = angular.module('digiProm', [
     'ngRoute']);

digiProm.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl:    'public/app/partials/home.html'
        })
        .when('/services', {
            templateUrl:    'public/app/partials/services.html'
        })
        .otherwise({
            redirectTo:     'partials/home.html'
        });
}]);

看完多个视频和教程后，我不知道如何编写指令函数才能工作。.我试图弄清楚如何使用这种格式

  digiProm.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
    });
   }
};

}]）;

这里的templateUrl是否应该是幻灯片的jquery文件的路径？ 链接里面会出现什么内容：function（...）?? 该脚本已作为有关如何使用bxSlider的示例进行了显示，并且我正尝试使用Pulse PM-Slider，因此不确定在部分加载后我应该调用哪些功能来加载它...

任何帮助都将不胜感激。 先感谢您

Answer 1

如果指令仅在另一个模板中已经存在的元素上激活，则不需要templateUrl 。

那是过去能够将html注入元素的方法。 换句话说，指令可以定义自己的模板

restrict还在于告诉指令要查找E一个元素，还是A一个属性还是C一个类。

我建议您添加一个属性，因为它使以后在标记中更容易看到

<div slider id="pm-slider" class="pm-slider">

然后从指令声明对象中删除templateUrl 。

还要注意，当iElement之前的页面中包含jQuery时，iElement已经是jQuery对象，因此您可以只使用iElement.bxslider({....})