私は、オンとオフを切り替えることができる情報のブロックを持つページを持っています。どのブロックを表示したいかを知るために、角のあるクッキーに状態を保存しました。角のあるクッキーを使用してページをパーソナライズする
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にすべてを移動する必要があります。
私はこのことが大きな疑問のように聞こえますが、それは私が苦労している部分よりもむしろ全体を投稿する方が有用だと分かりました。現在、私はウサギの穴を掘り下げて、角度の$cookies.putObjectに格納するオブジェクトの配列を作成する方法を見つけようとしています。 .push()をオブジェクトの配列にしようとすると、私は奇妙な結果を得ています。この機能を持つたとえば、私は、クリックイベントから呼び出そうとしました：
scope.buildCookieObj = function(blockRef, blockVisible) {
scope.cookieItems.push({blockRef: blockRef, blockVisible: blockVisible});
};
私は、これはコード書き込みサービスではありません知っていると私は本当にステップによって、このステップを取ることを試みてきたが、自分が雑草で失われた発見しました。私はAngularを初めて使っていて、それを使用したり挿入したりすることを知っています.JQueryは圧倒的になっています。だから、これを受け入れる方向性についてのアドバイスも大歓迎です。
EDIT：
私は（それが遅れているが、私はこれが動作しているが、私はそう思うかなり100％ではないです）、いくつかの進歩を遂げていると思います。これは、クッキーオブジェクトを設定する更新されたコードです。今度は、最初にクローズするように設定する必要がある（クッキーから）ブロックを取得して反復処理するだけです。本当に反対除く
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();
});
}
}]);
さらに進展、：私はそれはあなたがアプリを再度開くとオフと上のブロックを切り替えるたびに上書きさという点でクッキーを設定し、追加の問題を持って実現
。それでも論理を考えようとしている。時間やセッションに依存するものを名前にしたり、それ以外のものに名前を付けると、それをどのように取得してそれを反復するかはわかりません。
私は値を取得するために、これを行っているクッキーの取得のためにとオンまたはオフに切り替えることに対応するブロックを設定したよう：
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要素がまだロードされていなくても、ロードされているローディング画面があるからです。しかし、それは私たち初心者に尋ねなければならない私たちのアプリに特有のものかもしれません。ちょうど私がすべての情報でここに更新したいと思った。
EDIT＃2： だから私は働き、私はここに私の質問に「答え」が、私はまだいくつかの作業が必要と思いついた解決策について考えた解決策が出ています。すべてのロジックが指示にあり、私はそれがどこにあるべきかわからない。それは誰にも役立つ場合に私がここに投稿したかったと言いました。また、すべてのロジックをサービスに移す作業をしていて、その方向性も歓迎するからです。 （私はすでに工場の質問穴VSサービスダウンしてきたし、それはさらに、実際の作業を開始することなく、十分な手ごわいです！）
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();
});
}
}]);