2013-12-26 2 views
1

Я пытаюсь сделать простой образец TODO с помощью angular.js (используя маршруты). Я могу открыть форму для создания новой задачи, но когда я нажимаю кнопку «Назад» (после создания нового), она всегда вызывает сбой моего браузера.angular.js redirect crashing browser

Я пробовал настроить маршрут '/' и использовать в другом случае, но я все равно получаю тот же результат.

Что я делаю неправильно?

//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

ответ

3

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

+0

Спасибо за урок! –

+0

извините за беспокойство, но как я могу исправить эту проблему с контроллером? Я попытался включить родительский элемент и установить data-ng-controller, но он все еще не работает. Не могли бы вы помочь? –

+1

Вы можете использовать провайдер/сервис/фабрику для хранения и совместного использования данных. См. Это http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/ – LostInComputer