Angular 组件指令 angular 1.5

Question

我有这个指令，我想制作一个组件

angular.module('app')
.directive('year', function () {
    var controller = ['$scope', function ($scope) {
        $scope.setYear = function (val) {
            $scope.selectedyear = val;
        }
    }];
    return {
        restrict: 'E',
        controller: controller,
        templateUrl: "views/year.html"
    };
});

这是我目前得到的：

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

我不确定如何将我的 var controller 移动到 .component

Answer 1

将指令转换为组件需要做几件事

组件没有限制 属性，因为它仅限于元素。
对于控制器，您可以像在指令声明时那样设置，但在之外。
组件的控制器默认使用 controllerAs 语法，因此去掉 $scope

因此您的组件应如下所示...

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

function ComponentController(){
    var $ctrl = this;

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

Answer 2

您的组件应如下所示：

function YearController() {
  var $ctrl = this;

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

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

有关详细信息，请阅读以下 Stack Overflow 问题以了解更多详情： Angular 1.5 component vs. old directive - where is a link function? 和官方文档： https://docs.angularjs.org/guide/component

此外，请注意组件默认仅限于元素。

Angular 组件指令 angular 1.5

Angular Directive to component angular 1.5

javascript

angularjs

angularjs-directive

angular-components