javascript - 范围不更新模型中的更改

Question

我有一个可扩展的表单，它生成一个具有两个属性的对象:title 和description。该对象作为 json 对象成功提交到我的数据库。我目前正在使用 Angular (1.3.2) 前端，它与 Tastypie 交互，作为与 Django (1.7) 后端的接口(interface)层。问题是，在向数据库添加新对象后，我从未观察到主页的更新。我需要刷新页面才能显示对象，这并不理想。

home.html

<div class="protocol-list-container">
<div ng-app="protocolApp"
     id="protocol-list">
  <div class="new-protocol-container" ng-controller="protoCtrl">
    <h4>Add New Protocol</h4>
    <button type="button" 
            ng-click="toggle()"
            id="id_new">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <div ng-hide="visible" class="protocol-new">
      <form name="newProtocolForm" novalidate>
        <input type="text"
               id="id_new_title"  
               placeholder="Title" 
               ng-model="protocol.title"
               required /><br>
        <input type="text"
               id="id_new_desc" 
               placeholder="Description" 
               ng-model="protocol.description"
               required /><br><br>
        <input type="submit"
               id="id_submit_new_protocol" 
               value="New Protocol" 
               ng-click="submit(protocol)"
               ng-disabled="newProtocolForm.$invalid">
      </form>
      {% verbatim %}
      <pre>form = {{ protocol | json}}</pre>
      {% endverbatim %}
    </div>


    <div class="protocol">
      <h4>My Protocols</h4>
      <li ng-repeat="protocol in protocols"> 
        {% verbatim %}   
        <div><a href="/protocols/{{protocol.id}}"><span ng-bind="protocol.title"></span></a></div>
        {% endverbatim %}
        <div> - <span ng-bind="protocol.description"></span>
      </li>
      <br>
    </div>
  </div>
</div>

app.js

angular.module('protocolApp', [])
.factory('protocolFactory', ['$http', function($http) {

var urlBase = '/api/v1/protocol/';
var protocolFactory = {};

protocolFactory.getProtocols = function() {
  console.log('getProtocols called');
  return $http.get(urlBase);
};

protocolFactory.addProtocol = function(protocol) {
  console.log('addProtocol called');
  return $http.post(urlBase, protocol);
};

return protocolFactory;
}])

.controller('protoCtrl', ['$scope', 'protocolFactory',  
function ($scope, protocolFactory) {
$scope.visible = true;
var self = this;

getProtocols();

function getProtocols() {
  protocolFactory.getProtocols()
    .success(function(data) {
      $scope.protocols = data;
    })
    .error(function(error) {
      console.log('error retrieving protocols');
    });
}      

$scope.toggle = function() {
  $scope.visible = !$scope.visible;
  var self = this;
  var protocol = {};

  self.submit = function() {
    var protocol = {title: self.title, description: self.description};
    console.log('clicked submit with ', self.protocol);

    protocolFactory.addProtocol(self.protocol)
      .success(function(response) {
        console.log('protocol added');
        $scope.protocol = null;
      })
      .error(function(error) {
        console.log('post to api failed');
      });

      // gives the behavior I want, but ultimately crashes chrome 
      // $scope.$watch('protocols', function(newVal, oldVal) {
      //   protocolFactory.getProtocols()
      //     .success(function(data) {
      //       $scope.protocols = data;
      //       console.log('watcher data', data);
      //     });
      //   }, true); 
      };
  };        
}]);

我已经使用 $scope.$watch 函数(已注释掉)进行了一些测试，但这要么显示新对象并且永远不会停止(真正删除)，要么不更新(但告诉我认为基于控制台语句，数据中有一个额外的对象)(真实存在)。 任何帮助，将不胜感激。

Answer 1

当数据库更新时，前端如何知道它应该获取最新数据，除非我们告诉它？您在服务器和前端之间没有某种套接字，寻找事件并使前端获取最新数据...

因此，当您将数据发布到后端并且数据库已更新时，请在 submit 的成功回调中调用 getProtocols()。

在使用 $watch() 的情况下，您会重复从后端获取协议(protocol)，这会更新范围变量，从而再次重复触发回调并导致浏览器崩溃。