Angular Component Bindings Undefined

Question

I am trying to build the first angular component using ngRoute, and so far I can’t get the data for the solution. configurations:

.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; }); }] } }) 

component:

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

In html for a component, there is simply a p element with some random text, which is all.

I can see when I am debugging that I am receiving data, but I cannot access it on the component controller ...

EDIT: Thanks to the answer below, I fixed my problem. This had nothing to do with the problem with asynchronous calls, but with how I defined my route and component. See the code below for a fix. Thanks again.

Answer 1

some problems:

• as you said, Keys requirements in the directive should be keywords.
• its binding should be '<' (one-way binding) or "=" (two-way binding), but not "@", which simply passes the directive the string found between quotation marks
• in your directory controller var vm = this; should be higher than $ onInit, not inside (the scope is different)
• resolve.claimkeys should return a $ http promise, not just call it
• requireKeys should be received by the router controller as an insert and passed to its template

• controllerAs: '$resolve' should be used by the 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 , I used .state here, not .when for routing.