我有一个包含信息块的页面，您可以关闭和打开这些信息块。为了知道您想要显示哪些块，我将其状态存储在Angular cookie中。
HTML：
<block-toggle-btn block-ref="{{ id }}" climbnodes="3" mytarget=".block__content"></block-toggle-btn>
Angular Directive：
myApp.directive('blockToggleBtn', ['$cookies', function($cookies) {
return {
restrict: 'E',
template:'-',
link: link,
scope: {
blockRef: '@',
mytarget: '@', // target .cssclass
climbnodes: '=' // Used to climb the dom
}
};
function link(scope, element, attr) {
var parent = element.parent();
for (var i = 0; i < scope.climbnodes; i++) {
parent = parent.parent();
}
var blockRef = scope.blockRef;
var blockToggleCookie = $cookies.get(blockRef);
scope.toggleVisibility = function() {
element.toggleClass('invisible');
parent.find(scope.mytarget).slideToggle();
if (element.hasClass('invisible')) {
element.html('+');
blockVisible = 'invisible';
scope.setBlockToggleCookie(blockRef, blockVisible);
} else {
element.html('-');
blockVisible = 'visible';
scope.setBlockToggleCookie(blockRef, blockVisible);
}
};
scope.setBlockToggleCookie = function(blockRef, blockVisible) {
var expireDate = new Date();
expireDate.setTime(2144232732000);
$cookies.put(blockRef, blockVisible, {'expires': expireDate});
};
// If cookie is set keep block closed
if (blockToggleCookie == 'invisible') {
scope.toggleVisibility();
}
element.bind('click', function(event) {
event.preventDefault();
scope.toggleVisibility();
});
}
}]);
现在可以正常使用，但它为我显示的每个“块”信息设置了一个cookie。相反，我需要将它全部移动到一个cookie中，该cookie包含有关要显示哪些块以及要隐藏哪些块的信息。
我知道这听起来像一个大问题，而且确实如此，但我认为发布整个事情而不是我正在努力的每个部分更有用，这样我才能更好地理解并将它们放在一起。目前，我一直试图找出如何创建一个对象数组甚至存储在Angular $cookies.putObject中的兔子洞。当我尝试将.push()放入一个对象数组时，我得到了奇怪的结果。例如，我使用此函数尝试从click事件中调用：
scope.buildCookieObj = function(blockRef, blockVisible) {
scope.cookieItems.push({blockRef: blockRef, blockVisible: blockVisible});
};
我知道这不是代码编写服务，我真的试图逐步采取这一步，但发现自己迷失在杂草中。我是Angular的新手，知道它何时使用它或插入JQuery变得有点压倒性。因此，即使是关于采取这种方针的任何建议也是值得欢迎的。
修改
我想我已经取得了一些进展（虽然已经很晚了，所以我不是100％这是有效的，但我认为是这样）。这是设置cookie对象的更新代码。现在我只需要检索并迭代它以确定（从cookie）最初应该将哪些块设置为关闭。
myApp.directive('blockToggleBtn', ['$cookies', function($cookies) {
var cookieItems = [];
return {
restrict: 'E',
template:'-',
link: link,
scope: {
blockRef: '@',
mytarget: '@', // target .cssclass
climbnodes: '=' // Used to climb the dom
}
};
function link(scope, element, attr) {
var parent = element.parent();
for (var i = 0; i < scope.climbnodes; i++) {
parent = parent.parent();
}
scope.toggleVisibility = function() {
element.toggleClass('invisible');
parent.find(scope.mytarget).slideToggle();
if (element.hasClass('invisible')) {
element.html('+');
blockVisible = 'invisible';
scope.buildCookieObj(blockRef, blockVisible);
} else {
element.html('-');
blockVisible = 'visible';
scope.buildCookieObj(blockRef, blockVisible);
}
};
scope.buildCookieObj = function(blockRef, blockVisible) {
// If that item already exists remove so we can replace with new visibility setting
$.each(cookieItems, function(i){
if(cookieItems[i].blockRef === blockRef) {
cookieItems.splice(i,1);
return false;
}
});
cookieItems.push({blockRef: blockRef, blockVisible: blockVisible});
scope.setBlockToggleCookie(cookieItems);
};
scope.setBlockToggleCookie = function(cookieItems) {
// Maximum value for cookie expiration, i.e. the closest thing to
// "never expire" is the year 2038. See:
// http://stackoverflow.com/questions/532635/javascript-cookie-with-no-expiration-date/532638#532638 and
// http://stackoverflow.com/questions/34586494/make-cookies-never-expire-with-angularjs
var expireDate = new Date();
expireDate.setTime(2144232732000);
$cookies.putObject('personalization', cookieItems, {'expires': expireDate});
};
element.bind('click', function(event) {
event.preventDefault();
scope.toggleVisibility();
});
}
}]);
进一步的进展，除了相反的事实：
意识到我设置cookie的另一个问题是每次重新打开应用程序并关闭和打开块时它都会被覆盖。仍然试图通过逻辑来思考。如果我将它命名为依赖于时间或会话的东西，或者不是什么，不确定我将如何检索它以迭代它。
至于检索cookie并设置相应的块要打开或关闭，我已经这样做来检索值：
var personalizationCookie = $cookies.getObject('personalization');
console.log(personalizationCookie);
$.each(personalizationCookie, function(key, value) {
var blockRef = value.blockRef;
var blockVisible = value.blockVisible;
console.log(blockRef, blockVisible);
});
但我还没弄清楚如何定位这些块。我想也许只是简单的Jquery .find()，但我认为dom尚未渲染，所以它找不到任何东西。将它包装在$( document ).ready()中是行不通的我猜是因为我们有一个加载屏幕，即使我正在寻找的dom元素仍然没有加载也会被“加载”。但这可能是我们的应用程序特有的东西，我不得不问初始建设者。刚想我会在这里用所有信息更新。
编辑＃2： 所以我提出了一个有效的解决方案，我想在这里“回答”我的问题，但我提出的解决方案仍然需要一些工作。所有逻辑都在指令中，我知道它不在应有的位置。这就是说我想在这里发布它，以防它对任何人都有帮助，也因为我正在努力将所有逻辑转移到服务中，并且也欢迎任何方向。 （我已经停止了服务与工厂问题漏洞，即使没有开始实际任务，这也是令人生畏的！）
myApp.directive('blockToggleBtn', ['$cookies', function($cookies) {
var personalizationCookie = $cookies.getObject('personalization');
return {
restrict: 'E',
template:'-',
link: link,
scope: {
blockRef: '@',
mytarget: '@', // target .cssclass
climbnodes: '=' // Used to climb the dom
}
};
function link(scope, element, attr) {
var parent = element.parent();
for (var i = 0; i < scope.climbnodes; i++) {
parent = parent.parent();
}
var blockRef = scope.blockRef;
scope.toggleVisibility = function() {
element.toggleClass('invisible');
parent.find(scope.mytarget).slideToggle();
if (element.hasClass('invisible')) {
element.html('+');
blockVisibility = 'invisible';
scope.buildCookieObj(blockRef, blockVisibility);
} else {
element.html('-');
blockVisibility = 'visible';
scope.buildCookieObj(blockRef, blockVisibility);
}
};
scope.buildCookieObj = function(blockRef, blockVisibility) {
// If that item already exists remove so we can replace with new visibility setting
$.each(personalizationCookie, function(i){
if(personalizationCookie[i].blockRef === blockRef) {
personalizationCookie.splice(i,1);
return false;
}
});
personalizationCookie.push({blockRef: blockRef, blockVisibility: blockVisibility});
scope.setBlockToggleCookie(personalizationCookie);
};
scope.setBlockToggleCookie = function(personalizationCookie) {
// Maximum value for cookie expiration, i.e. the closest thing to
// "never expire" is the year 2038. See:
// http://stackoverflow.com/questions/532635/javascript-cookie-with-no-expiration-date/532638#532638 and
// http://stackoverflow.com/questions/34586494/make-cookies-never-expire-with-angularjs
var expireDate = new Date();
expireDate.setTime(2144232732000);
$cookies.putObject('personalization', personalizationCookie, {'expires': expireDate});
var personalizationCookie = $cookies.getObject('personalization');
};
// Check to see if there's a cookie for this element's block
// If yes, then toggle minus to plus and hide the block content the button refers to
$.each(personalizationCookie, function(key, value) {
if ((value.blockRef == scope.blockRef) && (value.blockVisibility == 'invisible')) {
parent.find(scope.mytarget).hide();
element.html('+').addClass('invisible');
}
});
element.bind('click', function(event) {
event.preventDefault();
scope.toggleVisibility();
});
}
}]);
答案 0 :(得分：0)
万一有人好奇我最终弄清楚了这一点，它和上面几乎一样，我只是将任何非DOM相关内容转移到服务中：
tsApp.service('personalizationCookieService', ['$cookies', function($cookies) {
if ($cookies.getObject('personalization')) {
var personalizationCookie = $cookies.getObject('personalization');
} else {
var personalizationCookie = [];
}
function setBlockToggleCookie(personalizationCookie) {
// Maximum value for cookie expiration, i.e. the closest thing to
// "never expire" is the year 2038. See:
// http://stackoverflow.com/questions/532635/javascript-cookie-with-no-expiration-date/532638#532638 and
// http://stackoverflow.com/questions/34586494/make-cookies-never-expire-with-angularjs
var expireDate = new Date();
expireDate.setTime(2144232732000);
$cookies.putObject('personalization', personalizationCookie, {
'expires': expireDate
});
}
return {
buildCookieObj: function(blockRef, blockVisibility) {
// If that item already exists remove so we can replace with new visibility setting
$.each(personalizationCookie, function(i) {
if (personalizationCookie[i].blockRef === blockRef) {
personalizationCookie.splice(i, 1);
return false;
}
});
personalizationCookie.push({
blockRef: blockRef,
blockVisibility: blockVisibility
});
setBlockToggleCookie(personalizationCookie);
}
};
}]);