javascript - AngularJS $watch 没有更新我的输出

Question

我有一个看起来像这样的 HTML -

<div ng-controller="PostsCtrl">
    <ul ng-repeat="post in posts" style="list-style: none;">
        <li style="padding: 5px; background-color: #f5f5f5;">
            <h4>
                <a href="#" ng-click="showDetails = ! showDetails">{{post.postTitle}}</a>
            </h4>
            <div class="post-details" ng-show="showDetails">
                <p>{{post.postContent}}</p>
            </div>
        </li>
    </ul>
</div>

现在，数据正在从基于 JSON 的 REST URL 填充并显示。我还有一个表单将向数据库添加新帖子-

<form data-ng-submit="submit()"
        data-ng-controller="FormSubmitController">
        <h3>Add Post</h3>
        <p>
            Title: <input type="text" data-ng-model="postTitle">
        </p>
        <p>
            Content: <input type="text" data-ng-model="postContent">
        </p>
        <p>
            Tags: <input name="postTags" data-ng-model="postTags" ng-list
                required>
        </p>
        <input type="submit" id="submit" value="Submit" ng-click="loadPosts()" /><br>
    </form>

我基本上想实现两件事 -1. 一旦我添加新帖子，它就会显示在上面的帖子列表中。2.只要我在后端手动添加新帖子，前端就会自动更新。

是否可以使用 Angular 来实现这两者，如果可以，我将如何做到这一点。下面是我的 Controller 代码，到目前为止，它向我显示现有的帖子，并让我向数据库添加新帖子。

<script>
    var app = angular.module("MyApp", []);

    app.controller("PostsCtrl", function($scope, $http) {
        $http.get('http://localhost:8080/MyApp/posts')
            .success(function(data, status, headers, config) {
                $scope.posts = data;
            }).error(function(data, status, headers, config) {
                console.log("Error in fetching the JSON data.");
            });
            $scope.$watch('posts', function(newVal, oldVal){
                console.log('changed');
                alert('hey, myVar has changed!');
            }, true);
        /*$scope.$watch('posts', function() {
            alert('hey, myVar has changed!');
            console.log("test log");
            $scope.$digest();
        });*/
    });

    app.controller('FormSubmitController', [ '$scope', '$http',
        function($scope, $http) {

            $scope.loadPosts = function() {
                $http.get('http://localhost:8080/MyApp/posts')
                .success(function(data, status, headers, config) {
                    $scope.posts = data;
                    alert(JSON.stringify(data));
                    //$scope.posts_updated = data;
                }).
                error(function(data, status, headers, config) {
                    console.log("Error in fetching the JSON data.");
                });
            }

            $scope.list = [];

            $scope.submit = function() {

                var formData = {
                    "postTitle" : $scope.postTitle,
                    "postContent" : $scope.postContent,
                    "postTags" : $scope.postTags,
                    "postedBy" : "admin"
                };

                var response = $http.post('addPost', formData);
                response.success(function(data, status, headers, config) {
                    console.log("na");
                });
                response.error(function(data, status, headers, config) {
                    alert("Exception details: " + JSON.stringify({
                        data : data
                    }));
                });

                //Empty list data after process
                $scope.list = [];

            };
        } ]);
</script>

对此的任何帮助都将非常感激。

Answer 1

1:发帖成功后，您可以将添加的对象推送到您的帖子列表中。这将触发双向绑定(bind)，并且该对象将“自动”出现在您的 ng-repeater 中。

$scope.posts.push(element);

2:这个有点棘手，因为 Angular 是一个客户端应用程序，它无法识别服务器端发生的情况。要完成这项工作，您需要做的是查看 websocket(例如 SignalR 或类似的)，只要添加某些内容，它们就可以向您的客户端推送。这还取决于您的“手动”插入是使用编程方法完成的。直接从数据库更改中进行操作会更加痛苦