Question

我正在使用Angularjs创建一个测验游戏，有三种布局。一个用于介绍，问题和奖金问题。我试图创建它而不更改网址或历史记录，因为不允许用户返回并更改他们的答案。这是可能的还是我应该尝试在相同的路径，控制器和视图中执行此操作，显示隐藏布局。

还是有更好的方法来实现这一目标。

提前致谢。

Answer 1

正如我在评论中所说，创建类似于原始$route的非常简单的路由应该很容易，但这些路由可以与ngInclude指令一起使用。出于好奇，我想出了这个实现：

angular.module('simpleRoute', []).provider('simpleRoute', function() {

    var routes = {},
        stack = [],
        currentRoute;

    this.when = function(path, config) {
        config.path = path;
        routes[path] = config;
        return this;
    };

    this.setCurrent = function(path) {
        currentRoute = routes[path];
    };

    function triggerChange(newRoute) {
        stack.forEach(function(callback) {
            callback(newRoute, currentRoute);
        });
        currentRoute = newRoute;
    }

    this.$get = function() {
        return {
            onRouteChange: function(callback) {
                stack.push(callback);
            },
            path: function(path) {
                if (!path) {
                    return currentPath;
                }
                triggerChange(routes[path], currentRoute);
            },
            getCurrent: function() {
                return currentRoute;
            }
        };
    }
})

.directive('simpleView', function($controller, simpleRoute) {
    return {
        template: '<div ng-include="templatePath"></div>',
        link: function($scope) {

            simpleRoute.onRouteChange(function(newRoute, oldRoute) {
                $scope.templatePath = newRoute.templateUrl;
                $controller(newRoute.controller, { $scope: $scope });
            });

            var currentRoute = simpleRoute.getCurrent();
            if (currentRoute) {
                simpleRoute.path(currentRoute.path);
            }
        }
    };
});

然后这个人会像这样使用：

app.config(function(simpleRouteProvider) {
    simpleRouteProvider
    .when('/', {
        controller: 'step0Controller',
        templateUrl: 'step0.html'
    })
    .when('step1', {
        controller: 'step1Controller',
        templateUrl: 'step1.html'
    })
    .setCurrent('/');
});

应配置HTML：

<div simple-view></div>

演示：http://plnkr.co/edit/u03zden3OtK1LFK25bSP?p=preview

Answer 2

您可以使用ngInclude（https://docs.angularjs.org/api/ng/directive/ngInclude）根据测验进度更改模板，请在此处查看示例演示 http://plnkr.co/edit/jq63ULx2ZrRC9rbJJzOY?p=preview

<body ng-controller="MainCtrl">   
    <a href="" ng-click="next()">Next Question</a>
    <hr/>
    <div ng-include="template"></div>
</body>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.q = 1;
    $scope.template = "view1.html";
    $scope.next = function() {
        if ($scope.q < 4) {
            $scope.q++;
            $scope.template = "view" + $scope.q + ".html";
        }
    }
});

Answer 3

感谢您的路由系统，但现在我有一个问题，在div简单视图中，我认为JS没有执行，在http://dev.enzo-bianchi.fr/，在＆＃34;我的项目＆＃34; 第一个选项卡位于index.html中，第二个选项卡位于div简单视图

中的部分选项卡中

更改视图和控制器而不更新URL或历史记录

3 个答案:

演示：http://plnkr.co/edit/u03zden3OtK1LFK25bSP?p=preview