对角路由感到困惑

Question

Ok, so with the following code - I only get a return of {{msg}} on the 'details.html' page. 好的，所以使用下面的代码-我在'details.html'页面上只得到{{msg}}的返回。 I can get literals, etc.....but nothing else. 我可以得到文字，等等.....但是没有其他。 I am sure it is something simple, but what I am trying to do is make it so that the title of a "todo" is displayed off of my list when i click the button. 我确信这很简单，但是我要尝试做的就是当我单击按钮时将“ todo”的标题显示在列表之外。 Any help would be greatly appreciated. 任何帮助将不胜感激。 Clicking on the 'details' button should make the title appear under the actual list. 单击“详细信息”按钮，标题应显示在实际列表下。

       <!DOCTYPE html>
<html ng-app="homework">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>
  <body>

  <html ng-app="homework">
  <body>

                    <form ng-controller="TodoController as todoCtrl" 
                            ng-submit="addTodo()">
                            <!-- add Bootstrap and AngularJS HTML Form here -->
                            <div class="form-group col-sm-6">
                                <label for="todoTitle">Short Name</label>
                                <input id="todoTitle" class="form-control" type="text" 
                                    ng-model="todoTitle">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="todoDescription">Description</label>
                                <input id="todoDescription" class="form-control" type="text" 
                                    ng-model="todoDescription">
                            </div>
                            <div class="form-group">
                                <input class="btn btn-primary" type="submit" value="Add New">
                            </div>
                            <!-- Display table if todoList has more than one object -->
                            <div ng-if="todoList.length > 0">
                                <table class="table table-striped">
                                    <th>ToDo Name</th>
                                    <th>Description</th>
                                    <th>Date</th>
                                    <th>Complete</th>
                                    <!-- loop over arry of todos -->
                                    <tr ng-repeat="todo in todoList track by $index">
                                        <td ng-bind="todo.title"></td>
                                        <td ng-bind="todo.description"></td>
                                        <td ng-bind="todo.date | date:'MMM d, yyyy'"></td>
                                        <td ng-click="deleteTodo()"><span class="glyphicon glyphicon-remove" style="color: red;"></span></td>
                                        <td><a href="#details">Details</a></td>
                                        <td ng-click="testTodo()"><span class="glyphicon glyphicon-ok" style="color: blue;"></span></td>
                                    </tr>
                                </table>
                            </div>
                    </form>    

      <div ng-view></div>




  <script>
    var app = angular.module('homework', ['ngRoute']);
                        app.controller('TodoController', function($scope) {
                            $scope.todoList = [];

                            $scope.addTodo = function() {
                                $scope.todoList.push({
                                    title:$scope.todoTitle, 
                                    description:$scope.todoDescription, 
                                    date:new Date()
                                    });
                                $scope.todoTitle = "";
                                $scope.todoDescription = "";
                            };

                            $scope.deleteTodo = function(){
                                $scope.todoList.splice(this.$index, 1);
                            };

                            $scope.testTodo = function(){
                                alert(this.todo.title);
                            }
                        });

      app.config(function($routeProvider){
          $routeProvider
          .when("/", {
              templateUrl: "blank.html"
          })
          .when("/details", {
              templateUrl: "details.html",
              controller: "detailsCtrl"
          });
    })
        app.controller("detailsCtrl", function($scope){
            $scope.msg = (todo.title);
        });


      </script>

      </body>
</html>






    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
  </body>
</html>

"details.html" “ details.html”

<!doctype html>
<html>
    <h1>{{msg}}</h1>
</html>

Answer 1

The problem is , in 问题是

app.controller("detailsCtrl", function($scope) {
  $scope.msg = (todo.title);
});

Here todo is undefined, it creates a new instance, hence todo becomes undefined. 这里todo是未定义的，它将创建一个新实例，因此todo变为未定义。 You need to pass the data between the controllers using service/factory. 您需要使用服务/工厂在控制器之间传递数据。 You can see this working by changing 您可以通过更改来查看此工作

app.controller("detailsCtrl", function($scope) {
  $scope.msg = "test";
});

DEMO 演示

对角路由感到困惑

问题描述

1 个解决方案

解决方案1
0 2016-12-03 17:39:49

对角路由感到困惑

问题描述

1 个解决方案

解决方案1 0 2016-12-03 17:39:49

解决方案1
0 2016-12-03 17:39:49