programing

서버에서 모델 데이터를 프로그래밍 방식으로 새로고침/갱신하려면 어떻게 해야 합니까?

showcode 2023. 3. 16. 22:00
반응형

서버에서 모델 데이터를 프로그래밍 방식으로 새로고침/갱신하려면 어떻게 해야 합니까?

배경

가장 기본적인 '새내기' 앵글이 있어요JS 질문입니다. 제가 잘 몰라서 죄송합니다. 코드를 통해 모델을 새로 고치려면 어떻게 해야 합니까?분명 어디선가 여러 번 대답했을 텐데, 도저히 찾을 수가 없었어요.저는 http://egghead.io에서 멋진 비디오를 보고 튜토리얼을 빠르게 살펴보았지만, 여전히 매우 기본적인 것을 놓치고 있는 것 같습니다.

여기서 적절한 를 하나 찾았습니다.$route.reload()아래 예에서 사용하는 방법을 잘 모르겠습니다.

셋업은 다음과 같습니다.

controllers.controllers.displaces

function PersonListCtrl($scope, $http) {
  $http.get('/persons').success(function(data) {
    $scope.persons = data;
  });
}

index.displaces를 표시합니다.

...
<div>
    <ul ng-controller="PersonListCtrl">
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
</div>
...

이 모든 것이 놀라울 정도로 잘 작동합니다. 페이지가 새로고침될 때마다 예상대로 사용자 목록이 표시됩니다.

질문

  1. 새로 고침 버튼을 구현하려고 합니다. 모델을 프로그래밍 방식으로 새로고침하려면 어떻게 해야 합니까?
  2. 모델에 액세스하려면 어떻게 해야 하나요?Angular가 마법처럼 컨트롤러의 인스턴스를 인스턴스화하고 있는 것 같습니다만, 어떻게 하면 얻을 수 있을까요?
  3. EDIT는 #1과 같은 세 번째 질문을 추가했습니다만, 어떻게 JavaScript만으로 할 수 있을까요?

제가 뭔가 기본적인 걸 놓치고 있는 게 분명한데, 그걸 알아내는데 한 시간이나 걸리고 나니, 물어볼 가치가 있는 것 같아요.중복되는 경우 알려주시면 + 링크를 닫겠습니다.

혼자 반쯤 왔잖아새로 고침을 구현하려면 스코프의 함수에 이미 있는 것을 정리하면 됩니다.

function PersonListCtrl($scope, $http) {
  $scope.loadData = function () {
     $http.get('/persons').success(function(data) {
       $scope.persons = data;
     });
  };

  //initial load
  $scope.loadData();
}

그러면 당신의 마크업에서

<div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="loadData()">Refresh</button>
</div>

「모델에 액세스 한다」는 것만으로, 그 $스코프에 액세스 할 수 있습니다.컨트롤러 내 사용자 배열:

예를 들어 컨트롤러의 (pueo 코드만):

$scope.addPerson = function() {
     $scope.persons.push({ name: 'Test Monkey' });
};

그러면 그걸 당신 생각이나 하고 싶은 대로 쓸 수 있을 거예요.

서버에서 모델 데이터를 프로그래밍 방식으로 새로고침/갱신하는 방법을 보여드리기 전에 먼저 말씀드리겠습니다.데이터 바인딩의 개념을 설명해야 합니다.이는 개발 방식에 일대 혁신을 가져올 매우 강력한 개념입니다.따라서 AngularjS의 구조를 이해하기 위해서는 이 링크 또는seconde 링크에서 이 개념을 읽어야 합니다.

이제 서버에서 모델을 업데이트하는 예를 보여드리겠습니다.

HTML 코드:

<div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="updateData()">Refresh Data</button>
</div>

컨트롤러의 이름은 다음과 같습니다.Person List Ctrl 및 모델 이름: 사람.컨트롤러 js로 이동하여 다음 함수를 개발합니다.updateData()모델 담당자를 갱신 및 갱신할 필요가 있을 때 호출됩니다.

Javascript 코드:

app.controller('adsController', function($log,$scope,...){

.....

$scope.updateData = function(){
$http.get('/persons').success(function(data) {
       $scope.persons = data;// Update Model-- Line X
     });
}

});

이제 어떻게 동작하는지 설명하겠습니다.사용자가 Refresh Data 버튼을 클릭하면 서버가 function updateData()를 호출하고 이 함수에 의해 web 서비스를 호출합니다.$http.get()그리고 ws의 결과가 나오면 모델(X라인)에 영향을 줍니다.모델의 결과에 영향을 미치는 주사위, 이 목록의 보기가 새 데이터로 변경됩니다.

언급URL : https://stackoverflow.com/questions/14693815/how-to-reload-refresh-model-data-from-the-server-programmatically

반응형