角度指令到组件角度 1.5

Posted 2023-03-13

【中文标题】角度指令到组件角度 1.5

【英文标题】：Angular Directive to component angular 1.5

【发布时间】：2017-04-01 13:38:34

【问题描述】：

我有这个指令，我想做一个组件

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

【参考方案1】：

您的组件应如下所示：

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

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

【参考方案2】：

将指令转换为组件需要做一些事情

组件没有

没有限制

属性，因为它仅限于元素。 对于控制器，您可以像在指令声明中所做的那样设置，但在它

外部

。 组件的控制器默认使用

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;
    

【讨论】：

感谢您的详细解释。这有点工作，但我认为现在有别的东西坏了。因为我有年份按钮，但我的下拉选择不再显示。

因为组件使用的是 controllerAs 语法并且默认别名是 $ctrl。你也应该用它更新你的组件 html。以 $scope ng-click="clickBtn()" 和控制器为例 ng-click="$ctrl.clickBtn()"