困惑的角路由

好了，用下面的代碼 - 我只得到{{味精}}的「details.html」頁面上的回報。我可以得到文字等.....但沒有別的。我相信這是簡單的，但我想要做的是，使得當我點擊按鈕時，「todo」的標題顯示在我的列表中。任何幫助將不勝感激。點擊'細節'按鈕應該使標題出現在實際列表下。困惑的角路由

 <!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」

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

來源

2016-12-03 Christopher Lewis

Wazzup與底部代碼這個工作，你有'後的jQuery'？ – Endless

的問題是，在

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

這裏待辦事項是不確定的，它會創建一個新的實例，因此待辦事項變得不確定。您需要使用服務/工廠在控制器之間傳遞數據。你可以看到通過改變

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

DEMO

來源

2016-12-03 17:39:49 Sajeetharan

我已經可以使用字符串來通過。這不是我問的問題。 –

困惑的角路由

回答

相關問題