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

您是否在新视图中使用 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 内如果这不是你的问题然后分享你的完整代码在 fiddle 或 codepen.

Answer 2

正如 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 3

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>

Answer 4

好的，我解决了这个问题。我需要分开不同的对象。所以我做了一个函数。

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

感谢您的帮助！我想你们都帮我解决了这个问题。

AngularJS 表达式在不同的视图中不起作用

AngularJS expression doesn't work in a different view

javascript

angularjs

expression

master-detail