使用1 Angular cookie对页面进行个性化设置

Question

我有一个页面，里面有可以切换和打开的信息块。为了知道你想显示哪些块，我将它们的状态存储在Angular cookie中。

HTML:

<block-toggle-btn block-ref="{{ id }}" climbnodes="3" mytarget=".block__content"></block-toggle-btn>

角度指令：

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()放入对象数组时，会得到奇怪的结果。例如，通过这个函数，我试图从点击事件调用：

scope.buildCookieObj = function(blockRef, blockVisible) {
scope.cookieItems.push({blockRef: blockRef, blockVisible: blockVisible});
};

我知道这不是一个代码编写服务，我真的试着一步一步地去做，但发现自己迷失在了杂草中。我是Angular的新手，知道它什么时候使用它或插入JQuery变得有点不知所措。因此，即使是任何关于采取这一行动的方向的建议都是受欢迎的。

编辑：

我认为我已经取得了一些进展(虽然已经很晚了，所以我还没有完全做到这一点，但我认为是这样)。这是设置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();
});
}
}]);

Answer 1

为了防止有人好奇，我最终弄清楚了这一点，而且与上面几乎相同，我只是将任何与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);
}
};
}]);