범위에서 모델의 변경 내용을 업데이트하지 않습니다.

Question

title 및 description이라는 두 가지 특성을 가진 개체를 생성하는 확장형 폼이 있습니다. 이 개체는 내 데이터베이스에 json 개체로 성공적으로 제출합니다. 저는 현재 Django (1.7) 백엔드와 인터페이스 레이어로서 Tastypie와 상호 작용하는 Angular (1.3.2) 프론트 엔드를 사용하고 있습니다. 문제는 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> 

는

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 기능을 몇 가지 테스트를 해봤 app.js하지만,이 중 하나를 새 개체를 보여줍니다 결코 멈추지 않거나 (true로 제거되거나) 업데이트되지 않습니다 (그러나 콘솔 명령문에 따라 데이터에 추가 객체가 있음을 알려줍니다) (true present). 도움이 될 것입니다.

Answer 1

데이터베이스가 업데이트되면 프런트 엔드는 알려주지 않으면 최신 데이터를 받아야한다는 것을 어떻게 알 수 있습니까? 서버와 프런트 엔드 사이에 어떤 종류의 sockets이 없으므로 이벤트를 찾고 프런트 엔드에서 최신 데이터를 가져옵니다 ...

그래서 백엔드에 데이터를 게시하고 데이터베이스를 업데이트하면, 성공 콜백 submit에서 getProtocols()으로 전화하십시오.

$watch()을 사용하는 경우 백엔드에서 프로토콜을 반복적으로 가져오고 범위 변수가 업데이트되어 다시 콜백이 발생하고 브라우저가 충돌합니다.