템플릿에 존재하는 지시문을 리프레시하는 방법 및 지시문에 데이터 자체 범위가 있습니다.

Question

- ng-view - 템플릿 작성 항목 기능과 동일한 템플릿에 저장된 항목을로드하는 지시문이 하나 있습니다.

지금은 항목을 저장하고 즉시 항목의 새 목록이 아닙니다 (지시문에서).

아무에게도이 문제를 어떻게 해결할 수 있는지 알려주므로 항목을 저장 한 후 즉시 지시문이 새로 고쳐집니다.

참고 : 지시문 링크 함수는 $http을 호출하고 데이터를 검색하고 지시문 템플릿을 채 웁니다. 그리고 지시어 요소는 다른 HTML 템플릿에 추가되었습니다.

html 템플릿 : (별도의 컨트롤러와 범위가 있음).

<div>.....code</div> 
    <div class="col-md-12"> 
    <parts-list></parts-list> 
    </div> 

지시어 코드 :

return { 
      templateUrl: 'partsListView.html', 
      restrict: 'E', 
      scope: {partList: '='}, 

및 template의 : 지시에

(function() { 
    angular.module("application") 
     .directive("partsList", function (partService) { 
      return { 
       templateUrl: 'partsListView.html', 
       restrict: 'E', 
       scope: {}, 
       link: function ($scope) { 
        $scope.partList = [{}]; 
        RetrieveParts = function() { 
         $scope.partList=partService.RetrieveParts(); 
        }; 
       } 
      }; 
     }); 
})(); 

Answer 1

우선 들어 사용 범위, 당신의 ReceiveParts 변수가 적절한 폐쇄하지 않습니다를 참조하십시오. 또한이 함수를 호출하고 있습니까? 이 함수가 어디에서 실행되는지 모르겠습니다.

link: function ($scope) { 
       $scope.partList = [{}]; 
       RetrieveParts = function() { 
        $scope.partList=partService.RetrieveParts(); 
       }; 
      } 

사소한 단순히 내가 $ 제한 시간 서비스와 동기화에 필요한 논리를 포장하여주기를 소화 AngularJS와 년대와 동기화 기능 로직을 연결하는 지시어 중 일부를 수행 할 수 있습니다 내가 배운 쉬운 트릭 ($ timeout은 setTimeout 호출과 $ scope. $ apply())입니다. 또한

link: function ($scope) { 
       $scope.partList = [{}]; 
       $scope.fetchedPartList = false; 

       $timeout(function() { 
        $scope.partList = partService.RetrieveParts(); 
        $scope.fetchedPartList = true; 
       }); 
      } 

, 당신은 partList 설정 한 후 내가 설정 한 부울 값을 알 수 있습니다 :이 트릭을 이렇게하면 코드의 모습처럼 만들 것입니다. HTML에서이 변수에 대해 ng-if (또는 ng-show/hide)를 사용하여 적절하게 해결 된 목록 만 표시 할 수 있습니다.

이 정보가 도움이되기를 바랍니다.

Answer 2

사용 isolated scope △ ▽를 UPD로 업데이트 곳 목록입니다

<parts-list partList="list"></parts-list> 

ated 데이터.

방법 고립 basic Example