Angular 对组件 angular 1.5 的指令 [英] 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) {
        $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 控制器 移动到 .component

I am not sure how to move my var controller into .component

推荐答案

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

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

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

• 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"
    });

function ComponentController(){
    var $ctrl = this;

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

这篇关于Angular 对组件 angular 1.5 的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！