范围不更新模型中的更改

Question

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

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

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

因此，当您 post 后端和数据库的数据更新后，在 submit 的成功回调中调用 getProtocols()。

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

范围不更新模型中的更改

Scope not updating changes in the model

javascript

django

tastypie

angularjs