Dom 변경 사항을보고 적용하는 방법

버튼을 클릭하면 <li>에 이미지가 저장되는 div이 생성됩니다.Dom 변경 사항을보고 적용하는 방법

<button data-ng-click="createWorkOrder()">Post project</button>

기능 :

$scope.createWorkOrder = function() { 
    //API call to get data 
    $scope.myPromise = operationsFactory.readWorkOrders().success(function (response) { 
     $scope.workOrdersList = response.result; 
    }) 
};

HTML : 나는 다음과 같은 기능을 사용하고

<ul> 
    <li dir-paginate="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 10"> 
     <a href=" "> 
      <h4>{{wd.name}}</h4> 
     </a> 
     <p>Status: {{wd.status}}</p> 
    </li> 
</ul>

위의 목록이 작성하지만 페이지를 볼 수있는 페이지를 새로 고침 할 필요가지고 . 위의 함수에서 새 데이터가 채워지 자마자 자동으로 표시되기를 원합니다.

출처

2016-06-08 Satyadev

은, 지금은 아직 불분명하다. 당신의 버튼은 "Post Project"라고 표시하고 함수는 이름에 액션을 생성하는 것을 나타내지 만, 그 함수의 코드는 읽기 동작 일뿐입니다. 언제 데이터가 서버로 전송됩니까? – Claies

맞습니다.하지만 여기서 재현 할 수있는 방식으로 실제로 설명하지 않은 문제에 대해 묻고 있습니다. 각도는 한쪽 또는 다른 쪽에서 값을 변경하지 않거나 잘못된 순서로 변경하지 않는 한 자동으로 데이터를 업데이트합니다. 전체 프로세스가 끝까지 끝났다고 보여주지 않으므로 어떤 단계가 빠져 있는지 분명하지 않습니다. – Claies

함수 이름이 무엇인지는 중요하지 않지만 이름에 따라'readWorkOrders'가 서버에있는 데이터를 읽는 것으로 가정 할 수 있습니다. 그리고 이전에 또는을 추가 할 위치를 표시하지 않습니다. 금후. – Claies

this plunker 문제점을 재현하려고하는데 아무 문제없이 작동했습니다.

위에서 말한 @claies이 맞는지 "각도는 한쪽 또는 다른 쪽에서 값을 변경하지 않는 한 자동으로 데이터를 업데이트합니다". 데이터를 올바르게 업데이트 하시겠습니까?

확인 된대로 요청이 끝나자 마자 목록이 업데이트됩니다.
요청이 완료된 후에도 여전히 코드가 작동하지 않으면 $scope.$apply() 메서드를 호출하면 바인딩이 업데이트됩니다. $scope.$apply docs

보기 :

<ul> 
    <li dir-paginate="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 5"> 
     <a href="{{wd.url}}"> 
      <h4>{{wd.name}}</h4> 
     </a> 
     <p>Status: {{wd.id}}</p> 
    </li> 
</ul> 
<dir-pagination-controls></dir-pagination-controls>

컨트롤러 : 편집 후

app.controller('MainCtrl', function($scope, $http) { 

    // Just to reproduce the problem 
    $http({ 
     method: 'GET', 
     url: 'https://api.github.com/repositories' 
    }).then(function successCallback(response) { 
     $scope.workOrdersList = response.data; 
    }, function errorCallback(response) { 

    }); 
});

출처

2016-06-08 19:08:05

Dom 변경 사항을보고 적용하는 방법

답변

관련 문제