다음과 같이 내가보기이 페이지

Question

를 다시로드하지 않고 두 번째로 $의 hhtp.get()를 사용하여 AngularJS와 컨트롤러에서 데이터를 업데이트하는 방법 (간결 단축) :

<ul class="nav nav-tabs nav-stacked"> 
    <li ng-repeat="i in range"> 
     <a id="list{{i}}" ng-click="ShowList(i)"> 
      List Item {{i}} 
     </a> 
    </li> 
</ul> 

<ng-switch on="listItemType"> 
    <div ng-switch-when="1"> 
     <form-a></form-a> 
    </div> 
    <div ng-switch-when="2"> 
     <form-b></form-b> 
    </div> 
    <div ng-switch-when="3"> 
     <form-c></form-c> 
    </div> 
</ng-switch> 

<form-a>, <form-b>, <form-c>는 부하 각 지시어 templateUrl 및 자신의 컨트롤러가 있어야합니다.

상기 뷰의 제어기는 :

는 는

알 수있는 바와 같이 이 제어기 http.get()를 사용하여 $ 일부 데이터를 페치

var listCount; 
var listIds = []; 
$http.get('/api/lists'). 
    success(function(data) { 
     $scope.lists = data.lists; 

     for (listCount = 1; listCount <= $scope.lists.length; listCount++) { 
      listIds.push(listCount); 
     } 

     $scope.range = listIds; 
    }); 
$scope.ShowList = function(listNumber) { 
    $scope.listItemType = $scope.lists[listNumber - 1].listType; 
}; 

.
이제 <form-a> 컨트롤러가 일부 데이터를 게시합니다. 위의 컨트롤러가 가져온 데이터와 동일한 데이터가 업데이트됩니다. 즉,보기 시작 부분에 <li> 태그에 새 항목이 필요합니다.

그러나 페이지의 컨트롤러는 이미 $ http.get() 요청을 완료했습니다. 첫 번째 컨트롤러의 목록 정보가 업데이트되도록 데이터를 다시 가져 오도록 요청하려면 어떻게해야합니까? 즉, 데이터가 변경된 경우 첫 번째 컨트롤러에 $ http.get()에 데이터를 다시 사용할 수있는 이벤트 핸들러가 있습니까?
페이지가 새로 고쳐 지거나 다시로드되지 않기 때문에 위의 코드를 사용하여 컨트롤러가 $ http.get()을 한 번만 호출하고 동일한 페이지의 지시문 컨트롤러가 데이터를 업데이트하면 컨트롤러에서 데이터를 업데이트 할 방법이 없습니다. 첫 번째 컨트롤러는 데이터를 업데이트합니다.

Answer 1

그냥 함수에서 $ get 호출을 감싸고 다시 호출하면됩니다. 때문에,

function ParentCtrl($scope, $http) { 
    $scope.foo = []; 

    $scope.loadFoo = function() { 
     $http.get('/foo/data') 
      .success(function(data) { 
       $scope.foo = data; 
      }); 
    }; 

    $scope.loadFoo(); 
} 

function ChildCtrl($scope) { 
    $scope.loadFoo(); //still here from Parent scope. 
} 

그러나 다시, 당신은 정말이 충분한 정보를 제공하지 않았다 귀하의 질문에 대답하기 :

우리는 아마 당신이가는 것을 더 볼 필요가 ...하지만이 고려됩니다 당신이 지시를 사용하고 있기 때문에 당신이 범위를 격리하는 경우, 당신은 당신의 loadFoo에 대한 참조를 통과해야합니다() 메소드 :

:

app.directive('testDir', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     'loadFoo': '&' 
    }, 
    link: function(scope) { 
     scope.loadFoo(); 
    } 
    } 
}); 

은 다음과 같이 사용하려면

<test-dir load-foo="loadFoo()"></test-dir>