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({....})