Question

我正在尝试使用angular.js（使用路径）进行简单的TODO示例。我可以打开表单来创建一个新任务，但是当我点击“返回”按钮（创建一个新按钮后）时，它总是会崩溃我的浏览器。

我已尝试配置'/'路由并使用.otherwise，但我仍然得到相同的结果。

我做错了什么？

//listTasks.htm

    <!DOCTYPE html>
    <html data-ng-app="appTodoList">
        <head>
            <title>TODO List</title>
        </head>
        <body>
            <div data-ng-controller="TodoCtrl">
                <a href="#/new">New Task</a>
                <ul id="listTasks">
                    <li data-ng-repeat="task in tasks">{{ task.name }}</li>
                </ul>
            </div>
            <div>
                <div data-ng-view=""></div>
            </div>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
            <script type="text/javascript" src="http://code.angularjs.org/1.2.6/angular-route.min.js"></script>     
            <script type="text/javascript">
                var app = angular.module("appTodoList",['ngRoute']);

                app.config(function ($routeProvider) 
                {
                    $routeProvider
                        .when('/list',
                        {
                            controller:'TodoCtrl',
                            templateUrl: 'listTasks.htm'
                        })
                        .when('/new',
                        {
                            controller:'TodoCtrl',
                            templateUrl: 'newTask.htm'
                        });
                });

                app.controller('TodoCtrl', function($scope) 
                {           
                    $scope.tasks = [];          
                    $scope.addTask = function ()
                    {   
                        $scope.tasks.push({name: $scope.new.TaskName});
                    };
                });


            </script>
        </body>
    </html>

// newTask.htm

<div>
    <input type="text" data-ng-model="new.TaskName" id="txtTaskName" placeholder="Task" />
    <input type="button" id="btnAdd" value="Add" data-ng-click="addTask()">
</div>
<a href="#/list">Back</a>

PS：我正在使用Firefox 26

Answer 1

Firefox崩溃，因为代码中存在无限循环。当您导航至/listTasks时，它会在/listTasks中再次加载ng-view，依此类推。

不是listTasks.htm包含路线，而是将路线放在另一个页面中，例如index.htm

  $routeProvider.when('/list',
            {
                controller:'TodoCtrl',
                templateUrl: 'listTasks.htm'
            })
            .when('/new',
            {
                controller:'TodoCtrl',
                templateUrl: 'newTask.htm'
            })
            .when('/',
            {
                redirectTo: '/list'
            });

顺便说一下，没有保存任务，因为每个视图实例都创建了一个新的控制器，但这是一个无关的问题

See sample

angular.js重定向崩溃浏览器

1 个答案: