Angular Component Bindings Undefined

Question

I'm trying to put together my first angular component with ngRoute and so far I'm unable to get data to resolve. 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;
            });
        }]
    }
})

Component:

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


        }]

The html for the component simply has a p element with some random text that's all.

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

EDIT: Thanks to the accepted answer below I have fixed my issue. It didn't have anything to do with an issue with asynchronous calls but with how I had defined my route and the component. See below code for fix. Thanks again.

Well my first problem is in my template 'claimKeys' should be claim-keys. However that simply resolves to a string '$resolve.claimKeys'... Little progress but not getting any further. — Mickers, Sep 29 '16 at 20:44
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Sep 29 '16 at 21:01
`return claimKeys` does not return anything to `$resolve.claimKeys` since it's async. See the dupe. — Heretic Monkey, Sep 29 '16 at 21:04

score 9 · Accepted Answer · answered Sep 29 '16 at 21:06

some issues:

as you said claimKeys within directive should be claim-keys
its binding should be '<' (one way binding) or '=' (two way binding), but not '@' which just passes to directive a string found between quotes
in your directive's controller var vm = this; should be above $onInit function and not inside it (the scopes are different)
resolve.claimkeys should return $http's promise and not just call it
claimKeys should be received by router's controller as injection and passed to its template

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

Thanks for your well thought out response. I took $resolve from an example I was following. I'll use a different name when I fix it. I'll be sure to mark this as my answer once I've had a chance to implement these changes. — Mickers, Sep 29 '16 at 21:42

Angular Component Bindings Undefined

1 Answers1