AngularJS - 비동기 데이터가 포함 된 종속성 주입

Question

내 Angular 지시어에 현재 로그인 한 사용자의 ID와 사용자 이름을 사용 가능하게 만들고 싶습니다. 이 정보를 검색하기위한 API 끝점을 만들었습니다 (다른 정보와 함께).

문제는 API 호출이 비동기라는 것이다 : 나는 API에 의해 반환 된 JSON 객체를 반환하는 공장을 만들려고하고

var url = baseUrl + 'api/sessions'; 
$http.get(url) 

. 그러나 호출이 비동기 적이기 때문에 factory 메소드를 구현하는 방법을 모르겠습니다.

또한 값이 API에서 반환 될 때까지 지시문을 인스턴스화하고 싶지 않습니다. AngularJS에 내장 된 메커니즘을 통해 비동기 호출이 먼저 반환되는지 확인하거나 호출이 반환 될 때 (JSON 객체 사용) 전역 객체를 만들고 값을 업데이트해야합니까?

application.factory('session', ['$http', 'baseUrl', function ($http, baseUrl) { 
    var session = {}; 
    var url = baseUrl + 'api/sessions'; 
    var promise = $http.get(url) 
     .success(function (data) { 
      for (var key in data) { 
       session[key] = data[key]; 
      } 
     }); 
    return session; 
}]); 

문제는이 채워지기 전에 종속 지시어는 세션 객체를 검색하는 것입니다 :

이 내가 현재 가지고있는 것입니다. API 호출에 오랜 시간이 걸리면 세션 객체는 사용자가 사용할 때 초기화되지 않을까 걱정됩니다.

Answer 1

AngularJS에 관해서는 꽤 심한 반 패턴을 따르고있는 것으로 나타났습니다. 내 HTML에서 함수에 속성을 바인딩하고 있었다. 대부분 이것은 ng-disabled="isThisFieldDisabled()"의 형식입니다.

문제는 함수가 호출 될 때마다 필드가 비활성화되어야하는지 여부를 계산하는 것이 었습니다. 데이터가 비동기 적으로로드 된 경우이 함수는 먼저 데이터가 아직로드되었는지 확인해야합니다.

function ($scope, someFactory) { 

    someFactory.then(function (data) { 
     $scope.data = data; 
    }); 

    $scope.isThisFieldDisable = function() { 
     if (!angular.isDefined($scope.data)|| $scope.data === null) { 
      return true; 
     } 
     return $scope.data.someCondition; 
    }; 
} 

훨씬 쉽게 접근 방식은 단순히 데이터 호출에서 반환 된 상태를 업데이트하는 것입니다 : 당신은 단지 $scope 값을 반환되면, 물론

function ($scope, someFactory) { 

    $scope.someCondition = true; 

    someFactory.then(function (data) { 
     $scope.someCondition = data.someCondition; 
    }); 

    $scope.isThisFieldDisable = function() { 
     return $scope.someCondition; 
    }; 
} 

을, 기능이 불필요하게된다. 당신은 너무 ng-disabled="someCondition" 같은 HTML을 업데이트 할 수 있으며, 컨트롤러는 훨씬 더 솔직를 끝 :

function ($scope, someFactory) { 

    $scope.someCondition = true; 

    someFactory.then(function (data) { 
     $scope.someCondition = data.someCondition; 
    }); 
} 

대부분의 경우, 실제로 현지 함수로 내 $scope 기능을 변환. 그들은 뒷받침 필드 값을 "계산"하는 논리를 포함하므로 $http 콜백에서 호출하는 것이 좋습니다. 나는 더 이상 $scope에 덤핑하지 않았기 때문에 보통 매개 변수를 추가해야했습니다.

Answer 2

언제나 ngIf를 사용하고 이행 요건을 기다릴 수 있습니다.

<div ng-if="session" session-toolbox></div> 

세션을 설정하면 DOM에서 세션 도구 상자를 사용할 수 있습니다.

그러나 현재 범위 밖에서이 데이터를 수집하는 경우 $ 맞춤 이벤트를 전송하고 원하는 컨트롤러에서 해당 이벤트를 수신해야합니다.