javascript - 角度指令到组件角度 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 组件与旧指令 - 链接函数在哪里？ 和官方文档： https ://docs.angularjs.org/guide/component

另外，请注意，默认情况下组件仅限于元素。