AngularJS $看沒有更新我的輸出

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.只要我在後端手動添加新帖子，前端就會自動更新。

是否有可能實現這兩個使用角，如果是的話我將如何能夠做到這一點。 下面是我的控制器代碼，它現在顯示我現有的職位，並讓我添加新的職位數據庫。

<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：在您發佈成功後，您可以將添加的對象推送到您的帖子列表中。這將觸發雙向綁定，並且對象將「自動」出現在你的ng-repeater中。

$scope.posts.push(element); 

2：這一個是有點棘手，因爲角是一個客戶端應用程序，它不承認在服務器端會發生什麼。你需要做的工作就是看看websockets（比如SignalR或類似的），只要有東西被添加就可以推送給你的客戶端。這也取決於你的「手動」插入是使用編程方法完成的。從直接數據庫的變化做將是很多更不好受

Answer 2

1. 調用$ http請求之前初始化

   $ scope.posts

   $ scope.posts = [];

2. 由於您使用的是$ http服務，因此在發現新數據時應自動重新繪製ng-repeat。所以你不必擔心它

3. 非常重要的是，當你使用$ http服務時，你不需要調用$摘要。盲目使用$摘要是一種非常糟糕的做法，並且是主要的性能問題。在$ http服務角度結束時會自動調用$ digest，因此您不需要再次調用