2
この問題は、角型のコントローラで発生しています。私は可能な限りそれを探しましたが、私は問題を解決することができませんでした。角度2ウェイバインディング
私は単純なコントローラを実装しようとしていますが、私の人生の間、私はバインディングを動作させることができません。私のデータを表示していません。たとえば、私が言うとき、{{ test }}、私はちょうどそれではなく、 "ハローワールド！"文字列。
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>
正確には動作しません。 – ajmajmajma
データが表示されません。たとえば、私が{{test}}と言うとき、私はちょうどそれを取得します、Hello Worldではありません！文字列。 – Ajlanclos
そしてAngularの適切なファイルパスに正しくリンクされています。私もCDNを試したことがあります。 – Ajlanclos