javascript - Angular : How to run JavaScript from inside Directive after directive is compiled and linked

Question

我有一个响应式模板，我正尝试将其与我的 Angularjs 应用程序一起使用。这也是我的第一个 Angular 应用程序，所以我知道我在未来有很多错误和重构。

我已经阅读了足够多的关于 Angular 文章，我知道 DOM 操作应该在指令中进行。

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

首先，我添加了所有正在使用的方法，然后在底部定义了 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()等等。

我确实读过那个 stackoverflow 帖子 "Thinking in AngularJS" if I have a jQuery background?并意识到我在某种意义上试图倒退，但我想使用我拥有的这个模板，所以我需要重新调整这个解决方案。

我正在尝试在我的 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 在指令中，直到我进入控制台并键入 App.init() 后它才起作用。之后，所有模板 javascript 都可以工作。我想知道如何在这些指令中做响应式主题。我试过在编译和链接部分都使用它。我已经尝试将代码放入编译和链接中，并在定义所有内容后从 Controller 调用 $scope.App.init() 并在底部调用。我也尝试将它放在 jsfiddle 中，但如果没有控制台调用 App.init() 就无法显示真实示例。

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

对于可能令人困惑的帖子，我提前深表歉意。我现在正在努力尝试从一个 Angular Angular 整合一些你做事的方式。当我收到回复以提供更多示例时，我将继续编辑帖子。

Answer 1

你说 我已经阅读了足够多的关于 Angular 文章，我知道 DOM 操作应该在指令中进行，但听起来你错过了指令的要点。一个指令应该处理 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
        }
    };
})

然后你的 View 看起来像这样:

<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>

然后你就不需要 SidebarmenuController 因为你的 Controller 函数不应该像侧边栏那样处理 DOM 元素。 Controller 应该只处理您要在 View 中显示的数据，然后 View (或 .html 文件)将通过使用指令处理该数据的显示和操作你写了。

这有意义吗？只需尝试将这个巨大的指令分解为许多较小的指令，以处理 DOM 中的特定元素或特定任务。