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
– Mickers, Commented Sep 29, 2016 at 20:44
Possible duplicate of How do I return the response from an asynchronous call? — Heretic Monkey
– Heretic Monkey, Commented Sep 29, 2016 at 21:01
return claimKeys does not return anything to $resolve.claimKeys since it's async. See the dupe. — Heretic Monkey
– Heretic Monkey, Commented Sep 29, 2016 at 21:04

Andriy · Accepted Answer · 2016-09-29 21:06:22Z

9

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.

answered Sep 29, 2016 at 21:06

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mickers Over a year ago

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.

Collectives™ on Stack Overflow

Angular Component Bindings Undefined

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related