0
votes

I am building a TODO application using Angular-Meteor.I am following the tutorial here: http://angularjs.meteor.com/tutorial/step_06

I have an error while I am trying to access a single todo item:

error

Here is my app.js

Todos = new Mongo.Collection('todos');

if (Meteor.isClient) {
  var todo = angular.module('todo', ['angular-meteor', 'ui.router']);

  todo.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $stateProvider
      .state('todos', {
        url: '/todos',
        templateUrl: 'todos-list.ng.html',
        controller: 'todoListController'
      })
      .state('todoDetails', {
        url: '/todos/:todoId',
        templateUrl: 'todo-details.ng.html',
        controller: 'todoDetailsController'
      });

    $urlRouterProvider.otherwise("/todos");

  }]);

  todo.controller('todoListController', ['$scope', '$meteor', function($scope, $meteor) {
    $scope.todos = $meteor.collection(Todos);

    $scope.addTodo = function(todo) {
      todo.date = new Date();
      $scope.todos.save(todo);
    };

    $scope.remove = function(todo) {
      $scope.todos.remove(todo);
    };

    $scope.clear = function() {
      $scope.todos.remove();
    };

  }]);

  todo.controller('todoDetailsController', ['$scope', '$stateParams','$meteor', function($scope, $stateParams, $meteor) {
    $scope.todoId = $stateParams.todoId;
    $scope.todo = $meteor.object(Todos, $stateParams.todoId);
  }]);

}

My index.html:

<head>
  <base href="/">
</head>

<body>
  <div ng-app="todo">
    <h1>
      <a href="/todos">Home</a>
    </h1>
    <div ui-view></div>
  </div>
</body>

My todo-list.ng.html

<form>
  <label for="name">Name</label>
  <input type="text" id="name" ng-model="newTodo.name">
  <label for="priority">Priority</label>
  <input type="text" id="priority" ng-model="newTodo.priority">
  <button class="btn btn-primary" ng-click="addTodo(newTodo)">Add Todo</button>
</form>
<ul>
  <li ng-repeat="todo in todos track by $index">
    <a href="/todos/{{todo._id}}">{{todo.name}} {{todo.priority}} {{todo.date | date}}</a>
    <button class="btn btn-primary" ng-click="remove(todo)">Done</button>
  </li>
  <h4>Tasks to do: {{todos.length}}</h4>
</ul>
<button class="btn btn-primary" ng-click="clear()">Clear list</button>

And todo-details.ng.html

<h1>Your to do</h1>
<input type="text" ng-model="todo.name">
<input type="text" ng-model="todo.priority">

I have no idea, what am I doing wrong, following the official tutorial step by step, just replace parties with todo, honestly.

Any ideas ?

1

1 Answers

0
votes

It turns out it was a bug caused by Meteor itself.

I have created an issue on Github and it was fixed.