2016-06-22 16 views
0

Auswertung Ich habe die folgende einfache Winkel JS Spur, die die grundlegenden CRUD-Operationen enthält:Angular JS Ausdrücke nicht

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

jedoch die Ausgabe zeigt:

enter image description here


So , der Ausdruck-Evaluator funktioniert perfekt, was bedeutet, dass Angular JS korrekt gebunden ist. Aber der Rest der Komponenten funktioniert überhaupt nicht. Anstelle von Qwe bekomme ich den Ausdruck {{user.name}}. Was mache ich hier falsch?

+4

Sie haben 2 'ng-app'-Tags, Angular kann nicht mehr als eine Anwendung auf einer Seite unterstützen. –

+2

@Vineet Wenn Sie mehr als eine Anwendung auf einer Seite wünschen, sollten Sie das Modul manuell mit 'angular.bootstrap' starten. Mit einer einzelnen App funktioniert Ihr Code: [Plunker] (https://plnrk.co/edit/CyE2KIgLkOtedW56KLhV?p=preview). Siehe auch [diese verwandte SO Frage] (http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page) –

+0

Danke euch beiden! – Vineet

Antwort

1

Hallo habe ich versucht, das Skript und scheinen zu arbeiten, wenn ich die erste ng-App

entfernen November die HTML-Teil wie diesem ist

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

Blick auf diese fiddle

Hoffnung diese Hilfe