角指令到组件角1.5

我有这样的指令，我想提出一个组件角指令到组件角1.5

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

来源

2016-11-17 mtkilic

您应该将转换指令转换为组件的几件事情

有无限制组件的属性，因为它仅限于元素。
对于控制器，您可以像在指令声明中一样设置，但在之外。
控制器的组件使用controllerAs语法为默认设置，以便摆脱$范围

所以您的组件应该是这样的......

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

function ComponentController(){ 
    var $ctrl = this; 

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

来源

2016-11-17 20:57:15

谢谢你的详细解释。这种有点奏效，但我认为现在有其他的东西坏了。因为我有我的年份按钮，但我的下拉选择不再显示。 – mtkilic

，因为组件使用的是controllerAs语法，默认别名是$ ctrl。你也应该更新你的组件html。作为$ scope ng-click =“clickBtn（）”的例子，使用controllerAs ng-click =“$ ctrl.clickBtn（）” –

你的组件应该是这样的：

function YearController() { 
    var $ctrl = this; 

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

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

欲了解更多详情，请阅读foll由于更多的deatils堆栈溢出问题： Angular 1.5 component vs. old directive - where is a link function? 和官方文档： https://docs.angularjs.org/guide/component

而且，请注意，部件仅限于由默认元素。

来源

2016-11-17 21:02:57 tomepejo

角指令到组件角1.5

回答

相关问题