2
Ich habe dieses Problem mit Controllern in Angular. Ich habe so viel wie möglich nachgeschlagen, aber ich konnte das Problem nicht lösen.Angular 2-Way Bindung
Ich versuche, einen einfachen Controller zu implementieren, aber für das Leben von mir kann ich nicht die Bindung an die Arbeit bekommen. Es zeigt meine Daten nicht an. Zum Beispiel, wenn ich sage, {{ test }}, bekomme ich genau das, nicht die "Hallo Welt!" Zeichenfolge.
var app = angular.module('App', []);
app.controller('Hi', function($scope){
\t $scope.hello = "hello!";
});
app.controller('todoCtrl', ['$scope', '$http', function($scope, $http) {
\t $scope.test = "Hello World!";
\t $scope.formData = "";
\t
\t $http.get('/api/todos')
\t \t .success(function(data) {
\t \t \t $scope.todos = data;
\t \t \t console.log(data);
\t \t })
\t \t .error(function(data) {
\t \t \t console.log('Error: ' + data);
\t \t });
\t
\t $scope.createTodo = function() {
\t \t $http.post('/api/todos', $scope.formData)
\t \t \t .success(function(data) {
\t \t \t \t $scope.formData.text = "";
\t \t \t \t $scope.todos = data;
\t \t \t \t console.log(data);
\t \t })
\t \t \t .error(function(data) {
\t \t \t \t console.log('Error: ' + data);
\t \t });
\t };
\t
\t $scope.deleteTodo = function(id) {
\t \t $http.delete('/api/todos/' + id)
\t \t \t .success(function(data) {
\t \t \t \t $scope.todos = data;
\t \t \t \t console.log(data);
\t \t })
\t \t \t .error(function(data) {
\t \t \t \t console.log('Error: ' + data);
\t \t });
\t };
}]);<!DOCTYPE html>
<html ng-app="App">
\t <head>
\t \t <title>TodoX</title>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t
\t \t <!-- Bootstrap CSS -->
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t \t <!-- TodoX CSS -->
\t \t <link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
\t </head>
\t <body ng-controller="todoCtrl">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="jumbotron text-center">
\t \t \t \t \t <h1>TodoX<span>{{todos.length}}</span>{{test}}</h1>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-8">
\t \t \t \t \t <div class="list-group">
\t \t \t \t \t \t <div class="checkbox" ng-repeat="todo in todos | orderBy:date">
\t \t \t \t \t \t \t <label class="list-group-item">
\t \t \t \t \t \t \t \t <input type="checkbox"/> {{todo.text}}
\t \t \t \t \t \t \t </label>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <form class="form-group">
\t \t \t \t \t \t <input type="text" class="form-control" ng-model="formData"/>
\t \t \t \t \t \t <input type="submit" ng-click="createTodo()" placeholder="Submit" class="form-control"/>
\t \t \t \t \t </form>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t
\t \t <!-- Angular JS -->
\t \t <script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
\t \t <!-- TodoX Core JS -->
\t \t <script type="text/javascript" href="core.js"></script>
\t </body>
</html>
Was genau funktioniert nicht? – ajmajmajma
Es zeigt meine Daten nicht an. Wenn ich zum Beispiel {{test}} sage, bekomme ich genau das, nicht die Hello World! Zeichenfolge. – Ajlanclos
Und es ist korrekt in den entsprechenden Dateipfad für Angular verknüpft. Ich habe sogar das CDN versucht. – Ajlanclos