Angular JS Dynamic Template pass variable

Question

I have a component that I want to pass a variable to.

Basically my component is called by:

<profileimage></profileimage>

I want to pass it an ID by

<profileimage userid="user.ID"></profileimage>

I would be able to then use that ID in the controller to load an image

function ProfileImageController($scope) {
   var ctrl = this;
} 
var app = angular.module('creatif')
    .component('profileimage', {
       templateUrl: 'components/profileimage/profileimage.html',
       controller: ProfileImageController
   });

Answer 1

Use bindings to receive the variables in your custom component.

.component('profileimage', {
   templateUrl: 'components/profileimage/profileimage.html',
   controller: ProfileImageController,
   bindings: {
     userid: '<'
   }
});

Then you can use userid in your controller by this.userid. Go through the angular's documentation to know more.

Bonus Tip:

Move your directive definition out of the controller function.

function ProfileImageController($scope) {
   var ctrl = this;
}

angular.module('creatif')
  .component('profileimage', {
     templateUrl: 'components/profileimage/profileimage.html',
     controller: ProfileImageController,
     bindings: {
       userid: '<'
     }
  });

Looks more readable, no?