如何將javascript轉換爲angularjs自定義指令服務？

Question

 



        $(document).ready(function() { 

         var apiRevoSlider = $('.tp-banner').show().revolution(
           { 
            dottedOverlay:"none", 
            delay:9000, 
            startwidth:1140, 
            startheight:700, 
            hideThumbs:200, 

            thumbWidth:100, 
            thumbHeight:50, 
            thumbAmount:3, 

            navigationType:"none", 
            navigationArrows:"solo", 
            navigationStyle:"preview1", 

            touchenabled:"on", 
            onHoverStop:"on", 

            swipe_velocity: 0.7, 
            swipe_min_touches: 1, 
            swipe_max_touches: 1, 
            drag_block_vertical: false, 


            parallax:"mouse", 
            parallaxBgFreeze:"on", 
            parallaxLevels:[8,7,6,5,4,3,2,1], 
            parallaxDisableOnMobile:"on", 


            keyboardNavigation:"on", 

            navigationHAlign:"center", 
            navigationVAlign:"bottom", 
            navigationHOffset:0, 
            navigationVOffset:20, 

            soloArrowLeftHalign:"left", 
            soloArrowLeftValign:"center", 
            soloArrowLeftHOffset:20, 
            soloArrowLeftVOffset:0, 

            soloArrowRightHalign:"right", 
            soloArrowRightValign:"center", 
            soloArrowRightHOffset:20, 
            soloArrowRightVOffset:0, 

            shadow:0, 
            fullWidth:"off", 
            fullScreen:"on", 

            spinner:"spinner3", 

            stopLoop:"off", 
            stopAfterLoops:-1, 
            stopAtSlide:-1, 

            shuffle:"off", 

            forceFullWidth:"off", 
            fullScreenAlignForce:"off", 
            minFullScreenHeight:"400", 

            hideThumbsOnMobile:"off", 
            hideNavDelayOnMobile:1500, 
            hideBulletsOnMobile:"off", 
            hideArrowsOnMobile:"off", 
            hideThumbsUnderResolution:0, 

            hideSliderAtLimit:0, 
            hideCaptionAtLimit:0, 
            hideAllCaptionAtLilmit:0, 
            startWithSlide:0, 
            fullScreenOffsetContainer: ".header" 
           }); 

         apiRevoSlider.bind("revolution.slide.onchange",function (e,data) { 
          if($(window).width() > 992) { 
           if($('#slider ul > li').eq(data.slideIndex-1).hasClass('light')){ 
            $('#header:not(.sticky-header)').addClass('light'); 
           } else { 
            $('#header:not(.sticky-header)').removeClass('light'); 
           } 
           MINOVATE.header.chooseLogo(); 
          } 
         }); 

        }); //ready 
       

Answer 1

這可以幫助你，順便說一句，如果你已經搜查了一下，你會發現它

/** 
* Sample Directive 
*/ 

define(['sampleLink', 'sampleCtrl'], function (link, controller) { 
    function sampleDir() { 
    return { 
    /** 
    * require is used by the link option 
    * can be a single controller, or an array. '^myController', or ['^controller2', '^controller1'] 
    * controllers to be used in the link section. link (scope, element, attrs, requires) 
    * 
    * '^myController' - use^to search up the parents for the controller, otherwise it only looks at it's own element and will throw an error 
    * */ 
    require : '', 

    /* restrict what type of elements this directive is rendered on E=element <directive> or A=attribute <element data-directive> */ 
    restrict : 'EA', 

    /* * 
    * transclude in or outer scope. true = use the outer scope that this directive belongs to. false = create a scope inside the directive 
    *  only use true when you want to create a directive that wraps arbitrary content 
    *  when you use false and create a scope, you will want to pass in scope, or data through attributes on the element 
    * */ 
    transclude : false, 

    /* * 
    * scope = create an isolate scope for the directive pass data into the directive through attributes 
    *  This allows us to isolate the scope and reuse these directives throughout an app. 
    *  =attr means to bind data to that attribute 
    *  &attr means with transclude turned on this attribute will trigger evaluation of an expression in the context of the original scope 
    *   any expression is allowed, including a function, this is ideal for binding callback functions to directive behaviors 
    *   use this when we want the directive to expose an API for binding behaviors 
    * */ 
    scope : { 
     inputObject : '=inputObject', 
     /*'close' : '&onClose'*/ 
    }, 

    /* templateUrl = Point to the template this directive should render */ 
    templateUrl : '/a/tpl/modules/util/input/inputs.html', 

    /** 
    * link : use link when you want to manipulate the dom with the directive 
    * takes a function, inline or it can be dependency injected through requireJS 
    * use the following signature function lin k(scope, element, attrs) { ... } 
    * 
    * scope is an angular scope object 
    * element is the jqLite wrapped element that this directive matches 
    * attrs is a hash object with key-value pairs of normalized attribute names and their values 
    * */ 
    link : link, 

    /** 
    * Specify a controller, and use controllerAs to alias the scope, if you want to reference the scope or it's functions in the template. 
    * You must define scope in the directive for this to be used. 
    * 
    * Q: What's the difference between controller and link? - A: Controllers can expose an API, and link can interact with controllers using require 
    * 
    * Best Practice: Only use controller when you want to expose the directive controller to another directive. Otherwise use Link 
    * 
    * This is great for building complicated directives that are made up of other directives and need to communicate with one another. 
    * */ 
    controller : controller 
    /*controllerAs : 'input'*/ 

} 
} 

return sampleDir; 
});