Mickers Mickers - 2 months ago 73
AngularJS Question

Angular Component Bindings Undefined

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.

Answer

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.