AngularJS:如何在编译和链接指令后从Directive内部运行JavaScript

Question

我有一个响应式模板,我试图用我的Angularjs应用程序.这也是我的第一个Angular应用程序,所以我知道我有很多错误,并在我的未来重新考虑.

我已经阅读了足够多的角度,我知道DOM操作被认为是在指令内部.

我有一个javascript对象负责模板重新调整侧面菜单的大小,基本上是模板的外壳.我将所有这些代码移动到一个指令中,并将其命名为response-theme.

首先,我添加了所有正在使用的方法,然后在底部定义了App对象.我删除了函数体以缩短代码.

基本上底部的对象是一个与所有方法一起使用的辅助对象.

var directive = angular.module('bac.directive-manager');

directive.directive('responsiveTheme', function() {

return {
    restrict: "A",

    link: function($scope, element, attrs) {


        // IE mode
        var isRTL = false;
        var isIE8 = false;
        var isIE9 = false;
        var isIE10 = false;

        var sidebarWidth = 225;
        var sidebarCollapsedWidth = 35;

        var responsiveHandlers = [];

        // theme layout color set
        var layoutColorCodes = {

        };

        // last popep popover
        var lastPopedPopover;

        var handleInit = function() {
        };

        var handleDesktopTabletContents = function () {
        };

        var handleSidebarState = function () {
        };

        var runResponsiveHandlers = function () {
        };

        var handleResponsive = function () {
        };

        var handleResponsiveOnInit = function () {
        };

        var handleResponsiveOnResize = function () {
        };

        var handleSidebarAndContentHeight = function () {        
        };

        var handleSidebarMenu = function () {
        };

        var _calculateFixedSidebarViewportHeight = function () {
        };

        var handleFixedSidebar = function () {
        };

        var handleFixedSidebarHoverable = function () {
        };

        var handleSidebarToggler = function () {
        };

        var handleHorizontalMenu = function () {
        };

        var handleGoTop = function () {
        };

        var handlePortletTools = function () {
        };

        var handleUniform = function () {
        };

        var handleAccordions = function () {
        };

        var handleTabs = function () {
        };

        var handleScrollers = function () {
        };

        var handleTooltips = function () {
        };

        var handleDropdowns = function () {
        };

        var handleModal = function () {
        };

        var handlePopovers = function () {
        };

        var handleChoosenSelect = function () {
        };

        var handleFancybox = function () {
        };

        var handleTheme = function () {
        };

        var handleFixInputPlaceholderForIE = function () {
        };

        var handleFullScreenMode = function() {
        };

        $scope.App = {

            //main function to initiate template pages
            init: function () {

                //IMPORTANT!!!: Do not modify the core handlers call order.

                //core handlers
                handleInit();
                handleResponsiveOnResize(); // set and handle responsive    
                handleUniform();        
                handleScrollers(); // handles slim scrolling contents 
                handleResponsiveOnInit(); // handler responsive elements on page load

                //layout handlers
                handleFixedSidebar(); // handles fixed sidebar menu
                handleFixedSidebarHoverable(); // handles fixed sidebar on hover effect 
                handleSidebarMenu(); // handles main menu
                handleHorizontalMenu(); // handles horizontal menu
                handleSidebarToggler(); // handles sidebar hide/show            
                handleFixInputPlaceholderForIE(); // fixes/enables html5 placeholder attribute for IE9, IE8
                handleGoTop(); //handles scroll to top functionality in the footer
                handleTheme(); // handles style customer tool

                //ui component handlers
                handlePortletTools(); // handles portlet action bar functionality(refresh, configure, toggle, remove)
                handleDropdowns(); // handle dropdowns
                handleTabs(); // handle tabs
                handleTooltips(); // handle bootstrap tooltips
                handlePopovers(); // handles bootstrap popovers
                handleAccordions(); //handles accordions
                handleChoosenSelect(); // handles bootstrap chosen dropdowns     
                handleModal();

                $scope.App.addResponsiveHandler(handleChoosenSelect); // reinitiate chosen dropdown on main content resize. disable this line if you don't really use chosen dropdowns.
                handleFullScreenMode(); // handles full screen
            },

            fixContentHeight: function () {
                handleSidebarAndContentHeight();
            },

            setLastPopedPopover: function (el) {
                lastPopedPopover = el;
            },

            addResponsiveHandler: function (func) {
                responsiveHandlers.push(func);
            },

            // useful function to make equal height for contacts stand side by side
            setEqualHeight: function (els) {
                var tallestEl = 0;
                els = jQuery(els);
                els.each(function () {
                        var currentHeight = $(this).height();
                        if (currentHeight > tallestEl) {
                            tallestColumn = currentHeight;
                        }
                    });
                els.height(tallestEl);
            },

            // wrapper function to scroll to an element
            scrollTo: function (el, offeset) {
                pos = el ? el.offset().top : 0;
                jQuery('html,body').animate({
                        scrollTop: pos + (offeset ? offeset : 0)
                    }, 'slow');
            },

            scrollTop: function () {
                App.scrollTo();
            },

            // wrapper function to  block element(indicate loading)
            blockUI: function (ele, centerY) {
                var el = jQuery(ele); 
                el.block({
                        message: '<img src="./assets/img/ajax-loading.gif" align="">',
                        centerY: centerY !== undefined ? centerY : true,
                        css: {
                            top: '10%',
                            border: 'none',
                            padding: '2px',
                            backgroundColor: 'none'
                        },
                        overlayCSS: {
                            backgroundColor: '#000',
                            opacity: 0.05,
                            cursor: 'wait'
                        }
                    });
            },

            // wrapper function to  un-block element(finish loading)
            unblockUI: function (el) {
                jQuery(el).unblock({
                        onUnblock: function () {
                            jQuery(el).removeAttr("style");
                        }
                    });
            },

            // initializes uniform elements
            initUniform: function (els) {

                if (els) {
                    jQuery(els).each(function () {
                            if ($(this).parents(".checker").size() === 0) {
                                $(this).show();
                                $(this).uniform();
                            }
                        });
                } else {
                    handleUniform();
                }

            },

            updateUniform : function(els) {
                $.uniform.update(els);
            },

            // initializes choosen dropdowns
            initChosenSelect: function (els) {
                $(els).chosen({
                        allow_single_deselect: true
                    });
            },

            initFancybox: function () {
                handleFancybox();
            },

            getActualVal: function (ele) {
                var el = jQuery(ele);
                if (el.val() === el.attr("placeholder")) {
                    return "";
                }

                return el.val();
            },

            getURLParameter: function (paramName) {
                var searchString = window.location.search.substring(1),
                    i, val, params = searchString.split("&");

                for (i = 0; i < params.length; i++) {
                    val = params[i].split("=");
                    if (val[0] == paramName) {
                        return unescape(val[1]);
                    }
                }
                return null;
            },

            // check for device touch support
            isTouchDevice: function () {
                try {
                    document.createEvent("TouchEvent");
                    return true;
                } catch (e) {
                    return false;
                }
            },

            isIE8: function () {
                return isIE8;
            },

            isRTL: function () {
                return isRTL;
            },

            getLayoutColorCode: function (name) {
                if (layoutColorCodes[name]) {
                    return layoutColorCodes[name];
                } else {
                    return '';
                }
            }

        };

    }

};           
}); 

最初App.init()对象方法将在任何常规html页面的底部调用,而我还有其他人也可以在特定页面上使用,例如Login.init()用于登录页面等等.

如果我有一个jQuery背景,我确实读过stackoverflow帖子 "Thinking in AngularJS"？并且意识到我试图在某种意义上向后退,但我想使用我拥有的这个模板,所以我需要改造这个解决方案.

我想在我的body标签上使用这个指令.

<body ui-view="dashboard-shell" responsive-theme>
    <div class="page-container">
        <div class="page-sidebar nav-collapse collapse" ng-controller="SidemenuController">

            <sidemenu></sidemenu>

        </div>

        <div class="page-content" ui-view="dashboard">
        </div>
    </div>
</body>

所以这是我的问题.这有点有用.我没有得到任何控制台错误,但当我尝试使用我的侧面菜单时,javascript for it在指令中它不起作用,直到我进入控制台并键入App.init().之后所有的模板javascript都有效.我想知道如何在这些指令中做响应主题的东西.我已经尝试在编译和链接部分使用它.我已经尝试将代码放在编译和链接中,并从控制器调用$ scope.App.init(),并在定义所有内容后调用底部.我也试过把它放在jsfiddle中但是如果没有控制台调用App.init()就无法显示真实的例子.

我的终端设计将有一些方法通过ui-router切换页面,当路由切换时,它调用适当的方法或重新运行指令或其他东西.将在每个页面上运行的唯一方法是App.init()方法,其他所有方法都是特定于页面的.从技术上讲,由于这是一个单页应用程序,App.init()只需要为应用程序运行一次.我将它绑定到ui-router中的父模板,并且将切换所有使用此shell模板的页面.有些对象需要访问其他对象才能调用其方法.

我很抱歉,可能是一个混乱的帖子.我现在正在努力试图将你从角度角度做事的一些方法放在一起.我将继续编辑帖子,因为我得到了回复以提供更多示例.

Answer 1

你说,I have read enough about angular that I know DOM manipulations are suppose to go inside a directive但听起来你错过了一个指令.指令应该处理DOM操作,是的,但不是整个页面的一个指令.页面的每个元素(或段)都应该有自己的指令(假设需要在该元素上完成DOM操作),然后$controller应该处理这些元素与您的数据(或模型)之间的交互.

你已经创建了一个巨大的指令,并试图让它做得太多.值得庆幸的是,你有点像设计你的代码一样,不应该太难将它分解成几个指令.基本上,每个handle函数都应该是它自己的指令.

所以你有类似的东西:

.directive('sidebarMenu', function(){
    return {
        template: 'path/to/sidebar/partial.html',
        link: function(scope, elem, attrs){
            // insert the code for your 'handleSidebarMenu()' function here
        }
    };
})
.directive('horizontalMenu', function(){
    return {
        template: 'path/to/horizontal/partial.html',
        link: function(scope, elem, attrs){
            // insert the code for your 'handleHorizontalMenu()' function here
        }
    };
})

然后你的视图看起来像:

<body ui-view="dashboard-shell" responsive-theme>
    <div class="page-container">
        <div class="page-sidebar nav-collapse collapse">

            <horizontal-menu></horizontal-menu>

            <sidebar-menu></sidebar-menu>

        </div>

        <div class="page-content" ui-view="dashboard">
        </div>
    </div>
</body>

然后你不需要a,SidebarmenuController因为你的控制器函数不应该像边栏一样处理DOM元素.控制器应该只处理您要在视图中显示的数据,然后视图(或.html文件)将通过使用您编写的指令来处理该数据的显示和操作.

那有意义吗？试着将这个巨大的指令分解成许多处理DOM中特定元素或特定任务的较小指令.