1

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

我已经阅读了足够多的关于 Angular 的内容，我知道 DOM 操作应该放在指令中。

我有一个 javascript 对象负责模板重新调整侧面菜单的大小，基本上是模板的外壳。我将所有这些代码移动到一个指令中，并将其命名为 responsive-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 帖子 “在 AngularJS 中思考”？并意识到我正在尝试在某种意义上倒退，但我想使用我拥有的这个模板，所以我需要改造这个解决方案。

我试图在我的身体标签上使用这个指令。

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

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

我很抱歉可能是一个令人困惑的帖子。我现在正在努力尝试从一个角度来看你做事的一些方式。当我收到回复以提供更多示例时，我将继续编辑该帖子。

4

1 回答 1

5

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

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

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

于 2013-10-18T19:33:58.587 回答