Выражение AngularJS не работает в другом виде

Question

У меня возникла проблема с созданием нового представления. Маршрут работает просто отлично, потому что он отлично отображает требуемый HTML, но выражения, которые отлично работали в основном представлении, не отображаются в новом.

<a href="#/view/{{todo.id}}" id="super" ng-repeat="todo in todos | filter: search"> 
     <div id="main" ng-class="{'done': todo.done}"> 
      <input type="checkbox" ng-model="todo.done" /> 
      <span>{{todo.title}}</span> 
      <button id="info">i</button> 
      <div class="inf"> 
       <span>Prioritás: {{todo.priority}}</span> 
      </div> 
      <div class="inf" id="sec"> 
       <span>Határidő: {{todo.deadLine | date: "yyyy. MMMM. dd"}}</span> 
      </div> 
     </div> 
    </a> 

Это выражения на главном экране, они работают как шарм.

myTodoList.config(['$routeProvider', function($routeProvider, $locationProvider) { 

$routeProvider 
    .when('', { 
     templateUrl: 'index.html', 
     controller: "mainController" 
    }) 
    .when('/view/:id', { 
     templateUrl: 'view.html', 
     controller: "mainController" 
    }).otherwise({ 
     redirectTo: '' 
    }); 

Это часть маршрута, это работает.

<div id="mainContent">Master Detail 
    <div ng-controller="mainController" ng-view></div> 
</div> 

Это div, где открывается новый вид.

<div> 
<p>Should be the ID: {{todo.id}}</p> 
<p> should be the title: {{todo.title}}</p> 
<p> this works: {{1+2}}</p></div> 

И это view.html. Третье выражение работает, поэтому у меня проблема с двумя другими выражениями. Я думаю, что я испортил это, потому что не могу достичь данных, которые я хочу. todo.id и todo.title - это данные, созданные function в режиме реального времени.

$scope.addTodo = function(title, priority, deadLine, id) { 
    $scope.todos.push({ 
     'id': lastId, 
     'title': $scope.newTodo, 
     'done': false, 
     'priority': $scope.newPriority, 
     'deadLine': $scope.newDeadLine 
    }); 
    $scope.newTodo = '' 
    $scope.newPriority = '' 
    $scope.newDeadLine = '' 
    lastId++; 
} 

Это function Я использую. Надеюсь, я хорошо описал проблему.

Answer 1

Хорошо, я решил эту проблему. Мне нужно было разделить разные объекты. Поэтому я сделал функцию.

$scope.currentTodo = $scope.todos[0]; 

$scope.selectTodo = function(todo) { 
    $scope.currentTodo = todo; 
} 

Я сделал div и вызвал эту функцию вместе с ним.

<div ng-click="selectTodo(todo);" id="super" ng-repeat="todo in todos | filter: search"> 

И проблемный div теперь выглядит следующим образом.

<div id="mainContent">Master Detail 
    <div> 
     <p>Should be the ID: {{currentTodo.id}}</p> 
     <p> should be the title: {{currentTodo.title}}</p> 
    </div> 
</div> 

Благодарим за помощь! Я думаю, что вы оба помогли мне решить эту проблему.

Answer 2

Вы используете ng-repeat на новом окне?

<div> 
<p>Should be the ID: {{todo.id}}</p> 
<p> should be the title: {{todo.title}}</p> 
<p> this works: {{1+2}}</p></div> 

Вашего Scope имя переменной $socpe.todos, но здесь вы пытаетесь получить доступ todo убедитесь, что если вы находитесь внутри ng-repeat, если это не ваша проблема, то поделиться полным кодом на скрипке или codepen.

Answer 3

Как сказал Jeyenthaaran Nanjappan, я думаю, что ваш div должен выглядеть следующим образом:

<div ng-repeat="todo in todos"> 
    <p>Should be the ID: {{todo.id}}</p> 
    <p> should be the title: {{todo.title}}</p> 
    <p> this works: {{1+2}}</p> 
</div> 

Answer 4

Некоторые вопросы нестингу DIV и HTML. Изменить это:

<div id="mainContent">Master Detail 
     <div ng-repeat="todo in todos" ng-controller="mainController" ng-view></div> 
     <p>Should be the ID: {{todo.id}}</p> 
    <p> should be the title: {{todo.title}}</p> 
    <p> this works: {{1+2}}</p> 
    </div> 

к этому:

<div id="mainContent">Master Detail 
     <div ng-repeat="todo in todos" ng-controller="mainController"> 
     <p>Should be the ID: {{todo.id}}</p> 
    <p> should be the title: {{todo.title}}</p> 
    <p> this works: {{1+2}}</p> 
      </div> 
    </div>