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

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

角度指令到组件角度1.5

2 个答案: