无法显示 angularJS 范围组件答案

【问题标题】：Cannot display angularJS scope components无法显示 angularJS 范围组件
【发布时间】：2014-12-24 15:31:26
【问题描述】：

我正在使用 AngularJS 和 Laravel 制作一个 Web 应用程序。该应用程序旨在允许用户在板上张贴注释。使用我的代码，提交注释时它会保存到数据库中，但不会显示在页面上。

angulartest.blade.php:

<!doctype html>
<html lang="en" ng-app="app">
<title>Test angular</title>
<link rel="stylesheet" href="css/bootstrap.css">

<body>
<div class="container" ng-controller="NoteController">
<h3>Add note</h3>
<form  ng-submit="addNote()">
    <input type="text" ng-model="newNote.content">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<ul>
    <li ng-repeat="note in notes">
        @{{ note.content }}
    </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

app.js

var app = angular.module('app', ['ngRoute']);
app.factory('Data', function Data($http) {
 return {
    getNotes: function getNotes() { return $http.get('/notes/all'); },
    addNote: function addNote(data) { return $http.post('/notes', data); },
    removeNote: function removeNote(id) { return $http.delete('/notes?id='+ id); } 
 } 
});


app.controller('NoteController', function NoteController($scope, Data) {
Data.getNotes().success(parseNotes);

function parseNotes(data) {
    $scope.notes = data;
}

$scope.newNote = { content: '', poster: '' };

$scope.addNote = function addNote() {
    Data.addNote({
        content: $scope.newNote.content,
        poster: $scope.newNote.post
    })
    .success(noteAddSuccess).error(noteAddError);
}

function noteAddSuccess(data) {
    $scope.error = null;
    $scope.notes.push(data);
    console.log($scope.notes);
    $scope.newNote = { content: '', poster: '' };
}

function noteAddError(data) {
    $scope.error = data;
}

$scope.removeNote = function removeNote(id) {
    if (confirm('Do you really want to remove this note?')) {
        Data.removeNote(id).success(noteRemoveSuccess);
    }
}

function noteRemoveSuccess(data) {
    var i = $scope.notes.length;
    while (i--) {
        if ($scope.notes[i].id == data) {
            $scope.notes.splice(i, 1);
        }
    }
}
});

我相信这是所有相关的代码。我不确定为什么它不显示 note.content 谢谢

【问题讨论】：

你能在小提琴上提供你的代码吗？
Data.addNote 中的 ajax 请求是否返回完整的笔记对象？这里没有太多故障排除信息

标签： javascript php html angularjs laravel

【解决方案1】：

由于数据更新不是从 UI 触发的，即用户点击或类似活动时，范围可能不知道这些更改。在您的代码中，您正在从服务更新数据，因此我的第一个建议是使用 $scope.$apply() 将模型上的更改传播到 UI。

function parseNotes(data) {
  $scope.notes = data;
  if (!$scope.$$phase) {
    $scope.$apply();
  }
}

这可能会有所帮助。如果没有，请回帖

【讨论】：

由表单中的提交按钮触发

【解决方案2】：

我发现我的错误，真的很简单。在我请求 {{note.content}} 之前，我正在关闭 div 标签。它应该看起来像：

<div class="container" ng-controller="NoteController">
<h3>Add note</h3>
<form  ng-submit="addNote()">
    <input type="text" ng-model="newNote.content">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
<ul>
    <li ng-repeat="note in notes">
        @{{ note.content }}
    </li>
</ul>
</div>

感谢您的回复！

【讨论】：