Wiązania komponentu kątowego Nie zdefiniowano

Question

Próbuję połączyć mój pierwszy komponent kątowy z ngRoute i do tej pory nie mogę uzyskać danych do rozwiązania. config:

.when('/myfirstcomponent', { 
    template: '<myfirstcomponent claimKeys="$resolve.claimKeys"></myfirstcomponent>', 
    resolve: { 
     claimKeys: ['$http', function($http) { 
      $http.get('server/claimkeys.json').then((response) => { 
       var claimKeys = response.data.DATASET.TABLE; 
       return claimKeys; 
      }); 
     }] 
    } 
}) 

Składnik:

.component('myfirstcomponent', { 
     bindings: { 
      'claimKeys': '@' 
     }, 
     templateUrl: 'components/component.html', 
     controller: [function() { 
      this.$onInit = function() { 
       var vm = this; 
       console.log(vm.claimKeys); 
      }; 


     }] 

HTML dla składnika po prostu ma element P z jakiegoś losowego tekstu to wszystko.

widzę podczas debugowania, że ​​jestem pobierania danych, ale nie można uzyskać do niego dostęp na kontrolerze składnik ...

EDIT: Dzięki przyjętym odpowiedź poniżej Mam stały mój problem. Nie miało to nic wspólnego z problemem z asynchronicznymi wywołaniami, ale z tym, jak zdefiniowałem moją trasę i komponent. Zobacz poniżej kod naprawy. Dzięki jeszcze raz.

Answer 1

pewne problemy:

• jak mówiłeś claimKeys ciągu dyrektywy powinny zostać zastrzeżeniu klucze
• jego wiązanie powinno być '<' (obowiązujący w jedną stronę) lub '=' (dwukierunkowy bindowanie), ale nie "@", który przechodzi do dyrektywy, ciąg znaleziony między cyframi
• w kontrolerze twojej dyrektywy var vm = this; powinien być powyżej $ onInit funkcja, a nie wewnątrz niego (zakresy są różne)
• resolve.claimkeys powinien powrócić $ HTTP obietnicę, a nie po prostu zadzwoń to
• claimKeys powinny być odbierane przez sterownik routera jako zastrzyku i przekazywane do jej szablonu

• controllerAs: '$resolve' powinien być stosowany przez router

  app.component('myfirstcomponent', { 
      bindings: { 
      'claimKeys': '=' 
      }, 
      template: 'components/component.html', 
      controller: function() { 
      var vm = this; 
      this.$onInit = function() {    
       console.log(vm.claimKeys); 
      }; 
      } 
  }); 
  
  app.config(function ($stateProvider) { 
      $stateProvider.state('myfirstcomponent', { 
      url: '/myfirstcomponent', 
      template: '<myfirstcomponent claim-keys="$resolve.claimKeys"></myfirstcomponent>', 
      resolve: { 
       claimKeys: ['$http', function($http) { 
       return $http.get('claimkeys.json').then((response) => { 
        return response.data.DATASET.TABLE; 
       }); 
       }] 
      }, 
      controller: function (claimKeys) { 
       this.claimKeys = claimKeys; 
      }, 
      controllerAs: '$resolve' 
      }) 
  }); 
  

plunker: http://plnkr.co/edit/Nam4D9zGpHvdWaTCYHSL?p=preview, Użyłem tutaj .state, a nie . Do routingu.