javascript - Angularjs 在部分页面中加载 JQuery

Question

我有一个 LAMP 网站，我正在尝试将其转换为构建在 MEAN 上，并且我已将索引页面拆分为多个部分，以便我可以拥有一个 SPA。 我是 MEAN 的新手，但我正在慢慢学习和尝试一些东西，但是我现在停留在我在我的一个部分中使用的 JQuery slider 插件 并且它不会加载任何图像网站运行时的占位符。 我知道我应该使用指令，以便在部分页面加载到主页面后加载 JQuery 函数，因此为什么在 slider 应该显示的位置没有显示任何内容。

这是我的部分页面，其中包含单个图像的 slider 片段(目前 3 个图像有 3 个这样的“li” block ): 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 注入(inject)到元素中。换句话说，一个指令可以定义它自己的模板

此外，restrict 是告诉指令是否要查找 E 元素，或 A 属性或 C- 一个类。

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

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

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

另请注意，当 jQuery 在 angular.js 之前包含在页面中时 iElement 已经是一个 jQuery 对象，因此您可以只使用 iElement.bxslider({....})