我将脚本注入到网页中,它显示了一个简单的列表,我可以从列表视图更改为网格视图。它看起来像这样:
当我点击按钮" NEXT"我更改了角度状态,视图更改为antoher HTML。在那个其他的HTML文件中,我有一个按钮" BACK"它将状态更改回此列表模板,但在我单击后退按钮后,我转到第一个模板,视图如下所示:
此外,从列表到网格的视图更改按钮不再起作用了......
我不知道是否应该在此问题中粘贴我的代码。但这是角度或可能是小问题的问题吗?任何其他功能"检查所有"或"滚动"工作得很好
更新 我正在创建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 });
}
};
答案 0 :(得分:0)
默认情况下,Angular提供/持久化状态。你不需要保存它。单击“后退”按钮时,列表/网格视图标志/变量必定存在问题。