javascript - 使用 1 个 Angular cookie 个性化页面

Question

我有一个包含信息 block 的页面，您可以关闭和打开这些信息 block 。为了知道您想要显示哪些 block ，我将它们的状态存储在 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();
    });

}

}]);

目前效果很好，但它为我显示的每个“ block ”信息设置了一个 cookie。相反，我需要将其全部移动到一个 cookie，其中包含有关要显示哪些 block 和要隐藏哪些 block 的信息。

我知道这听起来像是一个大问题，确实如此，但我认为发布整个问题比发布我正在努力解决的每个部分更有用，以便我可以更好地理解并将其放在一起。目前，我一直在尝试弄清楚如何创建一个对象数组，甚至将其存储在 Angular $cookies.putObject 中。当我尝试将 .push() 放入对象数组时，我得到了奇怪的结果。例如，我尝试从点击事件调用此函数:

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

我知道这不是一个代码编写服务，我确实尝试过一步一步地执行此操作，但发现自己迷失在杂草中。我是 Angular 的新手，知道它何时使用它或插入 JQuery 变得有点不知所措。因此，即使是关于采取这一方向的任何建议也是受欢迎的。

编辑:

我认为我已经取得了一些进展(虽然已经晚了所以我不是 100% 这有效，但我认为是这样)。这是设置 cookie 对象的更新代码。现在我只需要检索并迭代它来确定(从 cookie)哪些 block 最初应该设置为关闭。

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 时遇到了另一个问题，因为每次重新打开应用程序并关闭和打开 block 时它都会被覆盖。仍在尝试思考其中的逻辑。如果我将其命名为依赖于时间或 session 或其他什么的东西，则不确定如何检索它以迭代它。

至于检索 cookie 并设置要打开或关闭的相应 block ，我已这样做来检索值:

    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);
});

但我还没弄清楚如何瞄准这些方 block 。我想也许只是简单的 Jquery .find() 但我认为 dom 尚未呈现，所以它没有找到任何东西。我猜将其包装在 $( document ).ready() 中不起作用，因为我们有一个加载屏幕，即使我正在寻找的 dom 元素仍然存在，它也会“加载” 't。但这可能是我们应用程序特有的东西，我必须询问初始构建者。只是想我会在这里更新所有信息。

编辑＃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);
    }

};

}]);