0

我将脚本注入网页，它显示了简单的列表，我可以将其从列表视图更改为网格视图。它看起来像这样：

在此处输入图像描述

当我单击“NEXT”按钮时，我更改了我的角度状态，并且视图更改为另一个 HTML。在其他 HTML 文件中，我有一个按钮“BACK”，它将状态更改回此列表模板，但是在单击返回按钮后，我转到第一个模板，视图如下所示：

在此处输入图像描述

此外，从列表到网格的视图更改按钮不再起作用......

我不知道我是否应该在这个问题中粘贴我的代码。但这是 Angular 还是 jQuery 的问题？任何其他“检查所有”或“滚动”功能都可以正常工作

更新

我正在创建 Google Chrome 扩展程序并用于制作列表/网格视图，我正在使用 MixItUp 库

这是我的列表控制器，它控制图片中的视图：

angular.module('app').controller('ListController', ListController);

ListController.$inject = ['$scope', '$http', '$location', '$state'];

function ListController($scope, $http, $location, $state) {

    var $frame = $('#smart');
    var $wrap = $frame.parent();
    var layout = 'list',
        $container = $('#ContainerSelect'),
        $changeLayouttoList = $('#toLongListSelect'),
        $changeLayoutToGrid = $('#toGridViewSelect');

    // Call Sly on frame
    $frame.sly({
        itemNav: 'basic',
        smart: 1,
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 1,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1
    });

    $container.mixItUp({
        animation: {
            animateChangeLayout: true,
            animateResizeTargets: true,
            effects: 'fade rotateX(-40deg) translateZ(-100px)'
        },
        layout: {
            containerClass: 'list'
        }
    });

    // assign function to onclick property of checkbox
    document.getElementById('checkbox_field').onclick = function () {
        // access properties using this keyword
        if (this.checked) {
            $(".selectProductCB").prop('checked', $(this).prop("checked"));
            $(".checkbox_txt").text("Uncheck all");
        } else {
            $(".selectProductCB").prop('checked', $(this).prop("checked"));
            $(".checkbox_txt").text("Check all");
        }
    };

    $scope.next = function () {
        $state.go("selectNotifier", {}, { location: false });
    };

    $scope.toLongList = function () {
        layout = 'list';
        $container.mixItUp('changeLayout', {
            containerClass: layout
        });
    };

    $scope.toGridView = function () {
        layout = 'grid';
        $container.mixItUp('changeLayout', {
            containerClass: layout
        });
    };
};

这是具有后退按钮的 Notifycontroller：

angular.module('app').controller('NotifyController', NotifyController);

NotifyController.$inject = ['$scope', '$http', '$location', '$state'];

function NotifyController($scope, $http, $location, $state) {
    $scope.back = function () {
        $state.go("selectList", {}, { location: false });
    };
    $scope.watchIt = function () {
        $state.go("target", {}, { location: false });
    }
};

使用此功能，我正在跳过状态：

 $scope.close = function () {
    $state.go("selectList", {}, { location: false });
};
4

1 回答 1

0

默认情况下，Angular 提供/保持状态。你不需要保存它。单击后退按钮时，列表/网格视图标志/变量肯定存在问题。

于 2016-04-06T15:36:05.967 回答