注入的jquery,角度代码不能一直工作

时间:2016-04-06 15:13:58

标签: javascript jquery angularjs mixitup

我将脚本注入到网页中,它显示了一个简单的列表,我可以从列表视图更改为网格视图。它看起来像这样:

enter image description here

当我点击按钮" NEXT"我更改了角度状态,视图更改为antoher HTML。在那个其他的HTML文件中,我有一个按钮" BACK"它将状态更改回此列表模板,但在我单击后退按钮后,我转到第一个模板,视图如下所示:

enter image description here

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

我不知道是否应该在此问题中粘贴我的代码。但这是角度或可能是小问题的问题吗?任何其他功能"检查所有"或"滚动"工作得很好

更新 我正在创建Google Chrome扩展程序以及制作列表/网格视图我正在使用MixItUp库

这是我的List控制器,它控制图片中的视图:

void setup() {
  size(500, 500);
  ellipseMode(RADIUS);
}

void draw() {
  background(0);

  float circleOneX = 100;
  float circleOneY = 200;
  float circleOneRadius = 50;

  float circleTwoX = 400;
  float circleTwoY = 300;
  float circleTwoRadius = 50;

  float distanceFromCircleOne = dist(mouseX, mouseY, circleOneX, circleOneY);
  float distanceFromCircleTwo = dist(mouseX, mouseY, circleTwoX, circleTwoY);

  if (distanceFromCircleOne < distanceFromCircleTwo) {
    //circle one is closer
    fill(255, 0, 0);
    ellipse(circleOneX, circleOneY, circleOneRadius, circleOneRadius);
    fill(0, 0, 255);
    ellipse(circleTwoX, circleTwoY, circleTwoRadius, circleTwoRadius);
  } else {
    //circle two is closer
    fill(0, 0, 255);
    ellipse(circleOneX, circleOneY, circleOneRadius, circleOneRadius);
    fill(255, 0, 0);
    ellipse(circleTwoX, circleTwoY, circleTwoRadius, circleTwoRadius);
  }
}

这是Notifycontroller,它有后退按钮:

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

通过这个功能,我跳过了各个州:

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

1 个答案:

答案 0 :(得分:0)

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