Javascript 基于jQuery插件的HTML5主题：AngularJS中的集成

嗨，伙计们
我正在尝试将购买的HTML转换为AngularJS 1.5.9
它包含许多jQuery模块
经过数小时的阅读和测试，我发现一个公平的解决方案，在我看来（我是Angular的初学者），就是指令和延迟加载jQuery库的概念，因为jQuery和Angular不是好朋友

• 问题是搜索框消失了，我不明白为什么（）
  如果我取消选中

  display:none仍然保持隐藏状态
  
  
  
  对于角度转换，我在states中使用了
  $ocLazyLoad
  ，为每个加载的视图注入必要的资源，并使用一个指令从
  
  主题脚本（来自
  $（文档）的代码）.ready（函数（$）
  函数。
  

指令（'customjs'，函数（）{
返回{
链接：函数（）{
“严格使用”；
等高（“.等高”）；
$（'.nav>li>ul-li>ul'）.css（'左'，$（'.nav>li>ul'）.width（））；
var navigationLi=$（'.nav>li'）；
navigationLi.hover（函数（）{
if（$（'body'）.hasClass（'navigation-fixed-bottom'））{
如果（$（窗口）.width（）>768）{
var spaceUnderNavigation=$（window.height（）-（$（this.offset（）.top-$（window.scrollTop（））；
if（spaceUnderNavigation<$（this）.children（'.child navigation'）.height（））{
$（this）.children（'.child导航'）.addClass（'position-bottom'）；
}否则{
$（this）.children（'.child导航'）.removeClass（'position-bottom'）；
}
}
}
});
setNavigationPosition（）；
$（'.tool tip'）.tooltip（）；
var select=$（'select'）；
如果（选择.length>0）{
select.selectpicker（）；
}
var bootstrapSelect=$（'.bootstrap select'）；
变量下拉菜单=$（'.下拉菜单'）；
bootstrapSelect.on（'show.bs.dropdown'，函数（）{
removeClass（'animation-fade-out'）；
addClass（'animation-fade-in'）；
});
bootstrapSelect.on（'hide.bs.dropdown'，函数（）{
removeClass（'animation-fade-in'）；
addClass（'animation-fade-out'）；
});
bootstrapSelect.on（'hidden.bs.dropdown'，函数（）{
var_this=$（this）；
$（_this）.addClass（'open'）；
setTimeout（函数（）{
$（_this）.removeClass（'open'）；
}, 100);
});
select.change（函数（）{
if（$（this.val（）！=“”）{
$（'.form search.bootstrap select.open'）.addClass（'selected-option-check'）；
}否则{
$（'.form search.bootstrap select.open'）.removeClass（'selected-option-check'）；
}
});
//联系方式
$（“#表单联系人提交”）.bind（“单击”），函数（事件）{
$（“#表单联系人”）。验证({
submitHandler:函数（）{
$.post（“assets/php/contact.php”，$（“#form contact”）.serialize（），函数（响应）{
$（'#表单状态'）.html（响应）；
$（“#表单联系人提交”）.attr（'disabled'，'true'）；
});
返回false；
}
});
});
//适合视频宽度和高度
如果（$（“.video”）.length>0）{
$（“.video”）.fitVids（）；
}
//价格滑块
var$priceSlider=$（“#价格输入”）；
如果（$priceSlider.length>0）{
$priceSlider.slider({
起：1000，
致：299000，
步骤：1000，
第二轮：1，
格式：{格式：'$#########'，区域设置：'en'}
});
}
//视差滚动和滚动后固定标题
$（'#map.marker style'）.css（'opacity'，'.5！important'）；
$（'#map.marker style'）.css（'bakground-color'，'red'）；
$（窗口）。滚动（函数（）{
var scrollAmount=$（窗口）.scrollTop（）/1.5；
scrollAmount=Math.round（scrollAmount）；
if（$（“body”）.hasClass（“导航固定底部”））{
如果（$（窗口）.scrollTop（）>$（窗口）.height（）-$（'.navigation'）.height（））{
$（'.navigation'）.addClass（'navigation-fix-to-top'）；
}否则{
$（'.navigation'）.removeClass（'navigation-fix-to-top'）；
}
}
如果（$（窗口）.width（）>768）{
if（$（'#map'）.hasClass（'has-parallax'））{
//$（'#map.gm style>div:first child>div:first child'）.css（'margin-top'，scrollmount+'px'）；//旧脚本
$（'#map.gm style'）.css（'margin-top'，scrollAmount+'px'）；
$（'#map.传单映射窗格'）.css（'margin-top'，scrollAmount+'px'）；
}
if（$（'#slider'）.hasClass（'has-parallax'））{
$（“.homepage slider”）.css（'top'，scrollAm
  .directive('customjs', function () {
        return {

            link: function () {
                "use strict";

                equalHeight('.equal-height');

                $('.nav > li > ul li > ul').css('left', $('.nav > li > ul').width());

                var navigationLi = $('.nav > li');
                navigationLi.hover(function () {
                    if ($('body').hasClass('navigation-fixed-bottom')) {
                        if ($(window).width() > 768) {
                            var spaceUnderNavigation = $(window).height() - ($(this).offset().top - $(window).scrollTop());
                            if (spaceUnderNavigation < $(this).children('.child-navigation').height()) {
                                $(this).children('.child-navigation').addClass('position-bottom');
                            } else {
                                $(this).children('.child-navigation').removeClass('position-bottom');
                            }
                        }
                    }
                });

                setNavigationPosition();

                $('.tool-tip').tooltip();

                var select = $('select');
                if (select.length > 0) {
                    select.selectpicker();
                }
                var bootstrapSelect = $('.bootstrap-select');
                var dropDownMenu = $('.dropdown-menu');

                bootstrapSelect.on('shown.bs.dropdown', function () {
                    dropDownMenu.removeClass('animation-fade-out');
                    dropDownMenu.addClass('animation-fade-in');
                });

                bootstrapSelect.on('hide.bs.dropdown', function () {
                    dropDownMenu.removeClass('animation-fade-in');
                    dropDownMenu.addClass('animation-fade-out');
                });

                bootstrapSelect.on('hidden.bs.dropdown', function () {
                    var _this = $(this);
                    $(_this).addClass('open');
                    setTimeout(function () {
                        $(_this).removeClass('open');
                    }, 100);
                });

                select.change(function () {
                    if ($(this).val() != '') {
                        $('.form-search .bootstrap-select.open').addClass('selected-option-check');
                    } else {
                        $('.form-search  .bootstrap-select.open').removeClass('selected-option-check');
                    }
                });

//  Contact form

                $("#form-contact-submit").bind("click", function (event) {
                    $("#form-contact").validate({
                        submitHandler: function () {
                            $.post("assets/php/contact.php", $("#form-contact").serialize(), function (response) {
                                $('#form-status').html(response);
                                $('#form-contact-submit').attr('disabled', 'true');
                            });
                            return false;
                        }
                    });
                });

//  Fit videos width and height

                if ($(".video").length > 0) {
                    $(".video").fitVids();
                }

//  Price slider

                var $priceSlider = $("#price-input");
                if ($priceSlider.length > 0) {
                    $priceSlider.slider({
                        from: 1000,
                        to: 299000,
                        step: 1000,
                        round: 1,
                        format: {format: '$ ###,###', locale: 'en'}
                    });
                }

//  Parallax scrolling and fixed header after scroll

                $('#map .marker-style').css('opacity', '.5 !important');
                $('#map .marker-style').css('bakground-color', 'red');

                $(window).scroll(function () {
                    var scrollAmount = $(window).scrollTop() / 1.5;
                    scrollAmount = Math.round(scrollAmount);
                    if ($("body").hasClass("navigation-fixed-bottom")) {
                        if ($(window).scrollTop() > $(window).height() - $('.navigation').height()) {
                            $('.navigation').addClass('navigation-fix-to-top');
                        } else {
                            $('.navigation').removeClass('navigation-fix-to-top');
                        }
                    }

                    if ($(window).width() > 768) {
                        if ($('#map').hasClass('has-parallax')) {
                            //$('#map .gm-style > div:first-child > div:first-child').css('margin-top', scrollAmount + 'px'); // old script
                            $('#map .gm-style').css('margin-top', scrollAmount + 'px');
                            $('#map .leaflet-map-pane').css('margin-top', scrollAmount + 'px');
                        }
                        if ($('#slider').hasClass('has-parallax')) {
                            $(".homepage-slider").css('top', scrollAmount + 'px');
                        }
                    }
                });

//  Smooth Navigation Scrolling

                $('.navigation .nav a[href^="#"], a[href^="#"].roll').on('click', function (e) {
                    e.preventDefault();
                    var target = this.hash,
                        $target = $(target);
                    if ($(window).width() > 768) {
                        $('html, body').stop().animate({
                            'scrollTop': $target.offset().top - $('.navigation').height()
                        }, 2000)
                    } else {
                        $('html, body').stop().animate({
                            'scrollTop': $target.offset().top
                        }, 2000)
                    }
                });

//  Rating

                var ratingOverall = $('.rating-overall');
                if (ratingOverall.length > 0) {
                    ratingOverall.raty({
                        path: 'assets/img',
                        readOnly: true,
                        score: function () {
                            return $(this).attr('data-score');
                        }
                    });
                }
                var ratingIndividual = $('.rating-individual');
                if (ratingIndividual.length > 0) {
                    ratingIndividual.raty({
                        path: 'assets/img',
                        readOnly: true,
                        score: function () {
                            return $(this).attr('data-score');
                        }
                    });
                }
                var ratingUser = $('.rating-user');
                if (ratingUser.length > 0) {
                    $('.rating-user .inner').raty({
                        path: 'assets/img',
                        starOff: 'big-star-off.png',
                        starOn: 'big-star-on.png',
                        width: 150,
                        //target : '#hint',
                        targetType: 'number',
                        targetFormat: 'Rating: {score}',
                        click: function (score, evt) {
                            showRatingForm();
                        }
                    });
                }

//  Agent State

                $('#agent-switch').on('ifClicked', function (event) {
                    agentState();
                });

                $('#create-account-user').on('ifClicked', function (event) {
                    $('#agent-switch').data('agent-state', '');
                    agentState();
                });

// Set Bookmark button attribute

                var bookmarkButton = $(".bookmark");

                if (bookmarkButton.data('bookmark-state') == 'empty') {
                    bookmarkButton.removeClass('bookmark-added');
                } else if (bookmarkButton.data('bookmark-state') == 'added') {
                    bookmarkButton.addClass('bookmark-added');
                }

                bookmarkButton.on("click", function () {
                    if (bookmarkButton.data('bookmark-state') == 'empty') {
                        bookmarkButton.data('bookmark-state', 'added');
                        bookmarkButton.addClass('bookmark-added');
                    } else if (bookmarkButton.data('bookmark-state') == 'added') {
                        bookmarkButton.data('bookmark-state', 'empty');
                        bookmarkButton.removeClass('bookmark-added');
                    }
                });

                if ($('body').hasClass('navigation-fixed-bottom')) {
                    $('#page-content').css('padding-top', $('.navigation').height());
                }

//  Masonry grid listing

                if ($('.property').hasClass('masonry')) {
                    var container = $('.grid');
                    container.imagesLoaded(function () {
                        container.masonry({
                            gutter: 15,
                            itemSelector: '.masonry'
                        });
                    });
                    if ($(window).width() > 991) {

                        $('.masonry').hover(function () {
                                $('.masonry').each(function () {
                                    $('.masonry').addClass('masonry-hide-other');
                                    $(this).removeClass('masonry-show');
                                });
                                $(this).addClass('masonry-show');
                            }, function () {
                                $('.masonry').each(function () {
                                    $('.masonry').removeClass('masonry-hide-other');
                                });
                            }
                        );

                        var config = {
                            after: '0s',
                            enter: 'bottom',
                            move: '20px',
                            over: '.5s',
                            easing: 'ease-out',
                            viewportFactor: 0.33,
                            reset: false,
                            init: true
                        };
                        window.scrollReveal = new scrollReveal(config);
                    }
                }

//  Magnific Popup

                var imagePopup = $('.image-popup');
                if (imagePopup.length > 0) {
                    imagePopup.magnificPopup({
                        type: 'image',
                        removalDelay: 300,
                        mainClass: 'mfp-fade',
                        overflowY: 'scroll'
                    });
                }

//  iCheck

                if ($('.checkbox').length > 0) {
                    $('input').iCheck();
                }

                if ($('.radio').length > 0) {
                    $('input').iCheck();
                }

//  Pricing Tables in Submit page

                if ($('.submit-pricing').length > 0) {
                    $('.btn').click(function () {
                            $('.submit-pricing .buttons td').each(function () {
                                $(this).removeClass('package-selected');
                            });
                            $(this).parent().css('opacity', '1');
                            $(this).parent().addClass('package-selected');

                        }
                    );
                }

                centerSearchBox();

                initializeOwl(false);
            }
        }
    });