AngularJS 1.5 이전에 인쇄 된 구성 요소가 컨트롤러 값을 얻습니다.

Question

부모 컨트롤러가있는 부모보기가 있고 하위 구성 요소는 2 개가 있으며 각각은 자신의 컨트롤러가 있습니다. 이

<section>  // Main Controller 
    <table-users listusers="users"></table-users>  // Component Table User Controller 
    <table-news listusers="users"></table-news>  // Component Table News Controller 
</section> 

등

뭔가 메인 컨트롤러 (함께 aprox 1 또는 제 2 초 정도)이 API에 GET의 XHR 요청을 실행, 그 요청의 응답은 구성 요소로 전달된다.

(function() { 
    'use strict'; 

    angular 
    .module('app.view') 
    .component('tableUsers', { 
     bindings: { 
     listusers: '=' 
     }, 
     controller : 'UsersTableController', 
     controllerAs : 'vm', 
     templateUrl : 'whatever.html' 

    }); 

})(); 

내 문제가

그래서 내가 vm.listusers = 정의되지 않은 가지고 ... 응답이 이미 인쇄 된 구성 요소 후에 돌려 주어집니다 : S 을 그리고 난이 vm.listusers의 =이 [{} , {} ...] 객체 ...

MainController에서 가짜 vm.users를 만들면 모든 것이 작동하므로 GET이 응답을 너무 늦게 반환하는 것입니다. 이 값이 이전에 그 같은 DOM이나 뭐 인쇄 반환 될 때까지 안녕 기다립니다 -

난 그냥 GitHub의 API를 PLUNKR CASE LINK

구성 요소를 알 수있는 방법이 있나요를 사용하여이 샘플 케이스를 만들어? 여기서 조금 누락되었습니다. 각도 1.5.3부터 고급

Answer 1

에서

덕분에 우리는 이들 중 하나가 $ POSTLINK라고 약간의 달콤한 방법에 액세스 할 수는 우리가 기본적으로 구성 요소의 링커 기능과 본질적으로 쓰기 만 할 수있는 방법을 모방 할 수있는 방법 구성 요소.

vm.$postLink = function() { 
     $timeout(function() { 
     vm.users = vm.listusers; 
     }) 
    } 

$ timeout의 캐치가 하나 있는데, 그것없이 올바르게 작동 할 수있었습니다. 어쨌든 그것은 다이제스트주기를 시작한다고 말합니다.

어떤 장소, 그것은 here에 대해 here를 읽어와 나는 또한 그것에 대해 쓴 here

이제 모든 것을 왜 u는 이미 "컨트롤러에 바인딩"인 값을 바인딩 다만 이미 바인딩을 사용했다 한 ...

angular 
.module('app') 
.component('tableUsers', { 
    bindings: { 
    listusers: '=' 
    }, 
    controller : 'ComponentController', 
    controllerAs : 'vm', 
    template : '<h1>{{vm.title}}</h1>'+ 
       '<p>{{vm.listusers}}</p>' + 
       '<ul>' + 
       '<li ng-repeat="user in vm.listusers">' + 
        '<strong>{{user.login}}</strong><span> - {{user.id}} </span>' + 
       '</li>' + 
       '</ul>' 
}); 

vm.users의 =의 vm.listusers을 할 필요가 없습니다 존재 ... 그 이미 컨트롤러에 바인딩, 단지 COM에 대한 소스 코드 내부 ...

사용 ponent를 사용하면 지시어에서 익숙한 bindToController 행이 기본적으로 우리가 전달한 바인딩 배열에 있다는 것을 알 수 있습니다.

bindToController: options.bindings || {}, 

구성 요소는 모두 우리에게 강요된 그 진부한 상용구를 제거하는 데 있습니다.

또한 상자에서 나오는 컨트롤러 이름 지정을 활용할 수 있습니다. 템플릿 $ ctrl에 vm이라는 의미없는 이름을 붙일 필요가 없다. 우리가 자유롭게 사용할 수있는 "자유로운"바인딩이다. 나는 그 사용법을 강력히지지한다.

angular 
.module('app') 
.component('tableUsers', { 
    bindings: { 
    listusers: '<' // Use 1 way bindings to enforce uni-directional data flow 
    }, 
    controller : 'ComponentController', 
    template : '<h1>{{$ctrl.title}}</h1>'+ 
       '<p>{{$ctrl.listusers}}</p>' + 
       '<ul>' + 
       '<li ng-repeat="user in $ctrl.listusers">' + 
        '<strong>{{user.login}}</strong><span> - {{user.id}} </span>' + 
       '</li>' + 
       '</ul>' 
}); 

마지막으로 당신의 PLUNKR