Angular Directive To Component Angular 1.5

I have this directive, that i would like to make a component angular.module('app') .directive('year', function () { var controller = ['$scope', function ($scope) { $sco

Solution 1:

There are few things you should do convert your directive to component

• There is no restrict property for component as it is restricted to elements only.
• For controller you could just set as you did at directive declaration but outside of it.
• Controllers for components use controllerAs syntax as default so get rid of $scope

So your component should look like this...

angular.module('app') 
    .component('year', {
        controller: ComponentController,
        templateUrl: "views/year.html"
    });

functionComponentController(){
    var$ctrl = this;

    $ctrl.setYear = function (val) {
       $ctrl.selectedyear = val;
    }
}

Solution 2:

Your component should look like this:

functionYearController() {
  var$ctrl = this;

  $ctrl.setYear = function (val) {
    $ctrl.selectedyear = val;
  }
}

angular.module('app').component('year', {
  templateUrl: 'views/year.html',
  controller: YearController
});

For more details, please read the following Stack Overflow question for more deatils: Angular 1.5 component vs. old directive - where is a link function? and the official documentation: https://docs.angularjs.org/guide/component

Also, please note that components are restricted to elements only by default.