i'm able basic component working, trying load data via $http (users.get()) returns promise (the data show in console.log(this.data). data not making component template. why?
.component('mrcuserinfo', { bindings: { email: '<', first_name: '<', last_name: '<' }, templateurl: 'components/userinfo.html', controller: function(users) { var scope = {}; scope.thisid = 1; this.miketest = 'this miketest'; users.get(scope) // $http()... .then(function(data) { this.data = data.data; this.email = data.email; this.miketest = 'this mike 2'; console.log('user?'); console.log(this.data); }); } and template has this
this userinfo.html: {{ $ctrl.miketest }} the template displays 'this miketest' not display 'this mike 2'
any clues appreciated. thanks. mike
be careful when using this, in asynchronous code. in specific case, this window object in callback, you're setting miketest variable on window rather controller.
you can either do:
var ctrl = this; users.get(scope) // $http()... .then(function(data) { ctrl.data = data.data; ctrl.email = data.email; ctrl.miketest = 'this mike 2'; console.log('user?'); console.log(ctrl.data); }); or explicitly bind this:
users.get(scope) // $http()... .then(function(data) { this.data = data.data; this.email = data.email; this.miketest = 'this mike 2'; console.log('user?'); console.log(this.data); }.bind(this)); additionally, if you're using babeljs, , able use modern javascript features, can use double arrow functions bind this lexical scope:
users.get(scope) // $http()... .then((data) => { this.data = data.data; this.email = data.email; this.miketest = 'this mike 2'; console.log('user?'); console.log(this.data); }); 