서버에서 모델 데이터를 프로그래밍 방식으로 새로고침/갱신하려면 어떻게 해야 합니까?
배경
가장 기본적인 '새내기' 앵글이 있어요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>
...
이 모든 것이 놀라울 정도로 잘 작동합니다. 페이지가 새로고침될 때마다 예상대로 사용자 목록이 표시됩니다.
질문
- 새로 고침 버튼을 구현하려고 합니다. 모델을 프로그래밍 방식으로 새로고침하려면 어떻게 해야 합니까?
- 모델에 액세스하려면 어떻게 해야 하나요?Angular가 마법처럼 컨트롤러의 인스턴스를 인스턴스화하고 있는 것 같습니다만, 어떻게 하면 얻을 수 있을까요?
- 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
'programing' 카테고리의 다른 글
패키지 내의 모든 클래스에서 로깅을 억제하도록 로그백 구성 (0) | 2023.03.16 |
---|---|
브라우저는 Ajax 요청 후 얼마나 기다려야 합니까? (0) | 2023.03.16 |
jQuery에서 Ajax 반환 데이터를 추출하는 중 (0) | 2023.03.16 |
URL과 보간으로 연결되는 AngularJS 여러 표현식 (0) | 2023.03.16 |
Wordpress의 게시 상자에 있는 게시물 편집 페이지에 필드를 추가하려면 어떻게 해야 합니까? (0) | 2023.03.11 |