범위에서 참조 할 때 출고시 데이터가 값을 표시하지 않습니다. AngularJS

Question

저는 AngularJS에서 아주 새로워서 문제에 난처한 상황에 처했습니다. 나는 공장에서 가치를 얻으 려하고 데이터를 얻을 수 있었고, 확인할 함수에 console.log()를 붙였다. 그러나이 데이터를 범위에 연결하고 콘솔을 사용하여 검사를 시도했다. .log 다시, ​​로그에 정의되지 않은 메시지가 나타납니다.

개체 범위 $ scope.formWO = {}을 (를) 만들려고했습니다. 그것을 참조하지만 여전히 나는 같은 메시지를 얻고있다. 시스템이 읽기 또는 기능을 수행하기 전에 스코프간에 충돌이 있는지 또는 페이지를 일찍 표시하는 문제인지는 알 수 없습니다. 나는 이미 스코프에서 많은 것을 읽었지만, 어떻게 든이 문제는 나의 발달을 완전히 막을 것 같다. 나는 이것이 어떤 것인지 알지 못한다. 그리고 이것에 대해서 분명하게 깨닫고 싶다.

여기에 정리 된 컨트롤러가 있습니다.

myApp.factory('totNoData', function($http, $log){ 
    return { 
     getTotNo: function(successcb){ 
      $http({method: 'GET', url: 'api/totno'}). 
       success(function(data, status, headers, config){ 
        successcb(data); 
       }). 
       error(function(data, status, headers, config){ 
        $log.warn(data, status, headers, config); 
       }); 
     } 
    } 
}); 

Answer 1

는 당신이 아마하고 싶은 것은 제 생각 엔, 로그를 이동하고, 다시로드, 당신이 '에 전달하는 익명 콜백 함수의 내부 : 여기

myApp.controller('ordersCtrl', 
    function ordersCtrl($scope, ngTableParams, dealerData, costElementData, totNoData, $http, $ekathuwa, $rootScope, $location, userService, $filter){ 

    $scope.formWO = {}; 


     $scope.addWorkOrder = function(){     

      $scope.modalHeader = "ADD NEW WORK ORDER"; 
      $scope.modalType = "Add"; 
      $ekathuwa.modal({ 
       id: "modalWO", 
       scope: $scope, 
       templateURL: "./tpl/modal-wo.html" 
      }); 

      $scope.$watch('formWO.dealer', function(newDealer, oldDealer){ 
       if (newDealer === oldDealer) { 
        return; 
       } 

       $http.get('api/profile/'+$scope.formWO.dealer). 
        success(function(data, status, headers, config){ 

         $scope.formWO.outletno = data.outletno; 

       }); 

       if ($scope.dealer === newDealer) { 
        return; 
       } 

      }); 

     } 

     $scope.submitAddWorkOrder = function(cost_element, desc, ets, etc, cost_estimate, dealer){ 

      totNoData.getTotNo(function(noData){ 
       $scope.formWO.totno = noData; 
      }); 

          console.log($scope.formWO.totno); 

      $scope.tableParams.reload(); 
     } 

}); 

은 공장 getToNo '. 마찬가지로 : 그대로

$scope.submitAddWorkOrder = function(cost_element, desc, ets, etc, cost_estimate, dealer){ 

     totNoData.getTotNo(function(noData){ 
      $scope.formWO.totno = noData; 
      console.log($scope.formWO.totno); 
      $scope.tableParams.reload(); 
     }); 
    } 

, 로그 및 재로드는 콜백이 호출 전에 일어나고있다. 이 같은 갈 것 순서 :

1. 호출 getTotNo 방법
2. 는 submitAddWorkOrder
3. 로그 $의 scope.formWO.totno (정의)
4. 호출에서
5. 단계 다시 HTTP 요청을 보내 $ scope.tableParams.reload(); ... 이벤트 루프/응답이 수신
6. HTTP 다이제스트, 성공 방법은
7. 콜백이
8. $ scope.formWO.totno는

승리에 대한

비동기로 설정되어 호출이라고합니다!

는 편집 : 패턴

더 나은는 $ HTTP 호출에서 반환 약속을 반환하는 것입니다.

그래서 서비스에 변경 :

getTotNo: function(){ 
     return $http({method: 'GET', url: 'api/totno'}); 
    } 

을 그리고 당신의 컨트롤러 기능을 리팩토링 :

$scope.submitAddWorkOrder = function(cost_element, desc, ets, etc, cost_estimate, dealer){ 

     totNoData.getTotNo().success(function (data) { 
      $scope.formWO.totno = noData; 
      console.log($scope.formWO.totno); 
      $scope.tableParams.reload(); 
     }).error(function (data, status, headers, config) { 
      $log.warn(data, status, headers, config); 
     }); 
    }