我有一个响应式模板,我试图用我的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()等特定页面上使用某些东西等等。
我确实读过stackoverflow帖子 "Thinking in AngularJS" if I have a jQuery background?并且意识到我试图在某种意义上倒退,但我想使用我拥有的这个模板,所以我需要改进这个解决方案。
我正在尝试在我的身体标签上使用此指令。
<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模板的页面。有些对象需要访问其他对象来调用它们的方法。
我很抱歉,可能是一个令人困惑的帖子。我现在正在努力试图将你从角度角度做事的一些方法放在一起。我将继续编辑帖子,因为我得到了回复以提供更多示例。
答案 0 :(得分: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中特定元素或特定任务的小指令。