角JS表達不評估

我有以下簡單的角度JS的蹤跡，它包含了基本的CRUD操作：角JS表達不評估

<html> 
<head> 
    <title>CRUD</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
</head> 
<body> 
    <div ng-app> 
     Simple Expression Evaluator:<br/> 
     <input ng-model="calculator"/><br/> 
     {{calculator + "=" + $eval(calculator)}} 
    </div> 
    <h3>CRUD - Comments</h3> 
    <div ng-app="commentapp"> 
     <ul ng-controller="commentController"> 
     <li ng-repeat="user in users"> 
      {{user.name}} wrote "{{user.comment}}" 
      <br/><a href="#" ng-click="remove(user)">Delete</a> 
      <a href="#" ng-click="edit(user)">Edit</a> 
     </li> 
     <li> 
      <input id="name" ng-model="current.name" value="{{current.name}}" /> 
      <input id="name" ng-model="current.comment" value="{{current.comment}}" /> 
     </li> 
     <li> 
      <button ng-click="save(current)"> 
      Save 
      </button> 
      <button ng-click="addNew(current)"> 
      Add New User 
      </button> 
     </li> 
     </ul> 
    </div> 
    <script> 
     var app = angular.module("commentapp", []); 
     app.controller("commentController", function($scope) { 
      $scope.users = [{ 
      "name": "Qwe", 
      "comment": "Great!" 
      }]; 
      $scope.current = {}; 
      $scope.addNew = function(user) { 
      $scope.users.push(user); 
      }; 
      $scope.edit = function(user) { 
      $scope.current = user; 
      }; 
      $scope.save = function(user) { 
      $scope.current = {}; 
      }; 
      $scope.remove = function(user) { 
      var index = $scope.users.indexOf(user); 
      $scope.users.splice(index, 1); 
      }; 
     }); 
    </script> 
</body> 
</html>

然而，輸出顯示：

所以，表達式評估器完美地工作，這意味着Angular JS被正確綁定。但其餘的組件根本不起作用。而不是Qwe，我得到的表達{{user.name}}。我在這裏做錯了什麼？

來源

2016-06-22 Vineet

您有2個'ng-app'標籤，Angular不支持頁面中的多個應用程序。 –

@Vineet如果你想在一個頁面中使用多個appliaction，你應該用'angular.bootstrap'手動引導模塊。使用單一應用程序，您的代碼有效：[Plunker]（https://plnkr.co/edit/CyE2KIgLkOtedW56KLhV?p=preview）。此外，請參閱[此相關的SO問題]（http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page） –

謝謝你們兩個！ – Vineet

您好我想你的腳本，似乎工作，當我刪除第一個NG-應用

十一月HTML部分是這樣

<h3>CRUD - Comments</h3> 
    <div ng-app="commentapp"> 
     <ul ng-controller="commentController"> 
     <li ng-repeat="user in users"> 
      {{user.name}} wrote "{{user.comment}}" 
      <br/><a href="#" ng-click="remove(user)">Delete</a> 
      <a href="#" ng-click="edit(user)">Edit</a> 
     </li> 
     <li> 
      <input id="name" ng-model="current.name" value="{{current.name}}" /> 
      <input id="name" ng-model="current.comment" value="{{current.comment}}" /> 
     </li> 
     <li> 
      <button ng-click="save(current)"> 
      Save 
      </button> 
      <button ng-click="addNew(current)"> 
      Add New User 
      </button> 
     </li> 
     </ul> 
    </div>

看看這個fiddle

希望這有助於

來源

2016-06-22 20:30:03 rick

角JS表達不評估

回答

相關問題