Angularjs在部分页面中加载JQuery

I have a LAMP website that i am trying to convert to be built on MEAN and I've split the index page into partials so i could have a SPA. I am completely new to MEAN but i'm slowly learning and trying things however i'm now stuck on JQuery slider plugin that I am using in one of my partials and it does not load any images in the placeholder when the website is ran. I know that i am supposed to use directives so that JQuery function is loaded after the partial page is loaded into the main page and hence why nothing is being displayed where the slider should be.

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

This is my partial page that contains the snippet of the slider for a single image (there are 3 of these 'li' blocks at the moment for 3 images): home.html

这是我的部分页面,其中包含单个图像滑块的片段(目前有3个图像中有3个'li'块):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>

My index.html file contains div ng-view tag where all of home.html should go.

我的index.html文件包含div ng-view标签,其中所有home.html都应该去。

app.js contains this code for routing and I know that here should go the .directives function for the JQuery plugin

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

After watching multiple videos as well as tutorials i can't figure out how i should write my directive function to work.. I am trying to work out how to use this type of format

在观看了多个视频以及教程后,我无法弄清楚我应该如何编写我的指令函数来工作..我正在尝试研究如何使用这种类型的格式

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

}]);

Is the templateUrl here supposed to be the path to the jquery file for the slideshow? What the heck would go inside the link: function(...) ?? This script has been shown as an example on how to use the bxSlider and i'm trying to use a Pulse PM-Slider so not sure what functions i'm supposed to call for it to load after the partial has been loaded...

这里的templateUrl应该是幻灯片显示的jquery文件的路径吗?在链接里面会发生什么:函数(...)??这个脚本已经作为一个例子展示了如何使用bxSlider并且我正在尝试使用Pulse PM-Slider,因此不确定在部分加载后我应该调用哪些函数来加载...

Any kind of help is much appreciated. Thank you in advance

任何形式的帮助都非常感谢。先感谢您

1 个解决方案

#1

If the directive is only activating on an element that already exists in another template then you don't need templateUrl.

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

That is used to be able to inject html into an element. in other words a directive can define it's own template

这用于能够将html注入元素。换句话说,指令可以定义它自己的模板

Also the restrict is to tell directive whether to look for E-an element , or A an attribute or C- a class.

限制是指示是否要查找E-an元素,或A属性或C-类。

I suggest you add an attribute since it makes it easier to see later on in the markup

我建议你添加一个属性,因为它可以让你以后更容易看到标记

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

Then remove templateUrl from your directive declaration object.

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

Also note that when jQuery is included in page before angular.js iElement is already a jQuery object so you can just use iElement.bxslider({....})

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

#1