角指令到組件角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

回答

相關問題