如何将 javascript 转换为 angularjs 自定义指令服务？

Question

$(文档).ready(函数() { var apiRevoSlider = $('.tp-banner').show().revolution( { dottedOverlay：“无”， 延迟：9000， 起始宽度：1140， 起始高度：700， hideThumbs:200, 拇指宽度：100， 拇指高度：50， 拇指数量：3， 导航类型：“无”， 导航箭头：“独奏”， 导航样式：“预览1”， 触摸启用：“开”， onHoverStop:"开", 刷卡速度：0.7， swipe_min_touches: 1, swipe_max_touches: 1, 拖动块垂直：假， 视差：“鼠标”， parallaxBgFreeze:"on", parallaxLevels:[8,7,6,5,4,3,2,1], parallaxDisableOnMobile:"on", 键盘导航：“开”， 导航HAlign：“中心”， 导航VAlign：“底部”， 导航HOffset:0, 导航VOffset:20, soloArrowLeftHalign:"左", soloArrowLeftValign:"居中", soloArrowLeftHOffset:20, soloArrowLeftVOffset:0, soloArrowRightHalign:"右", soloArrowRightValign:"中心", soloArrowRightHOffset:20, soloArrowRightVOffset:0, 阴影：0， 全宽度：“关闭”， 全屏：“开”， 微调器：“微调器3”， 停止循环：“关闭”， 停止后循环：-1， 停止滑动：-1， 洗牌：“关闭”， forceFullWidth：“关闭”， 全屏对齐力：“关闭”， minFullScreenHeight:"400", hideThumbsOnMobile:"关闭", hideNavDelayOnMobile:1500, hideBulletsOnMobile：“关闭”， hideArrowsOnMobile：“关闭”， hideThumbsUnderResolution:0, hideSliderAtLimit:0, hideCaptionAtLimit:0, hideAllCaptionAtLilmit:0, 开始幻灯片：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'); } 别的 { $('#header:not(.sticky-header)').removeClass('light'); } MINOVATE.header.chooseLogo(); } }); }); //准备好

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