Question

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

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，正在查找事件并使前端获取最新数据......

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

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

范围不更新模型中的更改

1 个答案: