移動上點擊指令到自定義指令

Question

我有一個指令和模板：

sortable_column_header.js.coffee：

sortableColumnHeader = -> 
    return { 
    restrict: 'A' 
    replace: true 
    scope: 
     sortReverse: '=sortreverse' 
     tfield: '@' 

    templateUrl: 'angular/templates/sortable_column_header.html' 
    } 

angular 
    .module 'dashboard' 
    .directive 'sortableColumnHeader', [ 
    sortableColumnHeader 
    ] 

模板/ sortable_column_header.html.haml

%th.order-column 
    {{tfield}} 
    %span.order-arrow 
    %span.glyphicon.glyphicon-chevron-up{ng: {show: '{{sortReverse}}'}} 
    %span.glyphicon.glyphicon-chevron-down{ng: {show: '{{!sortReverse}}'}} 

剝離控制器：

DashboardController =() -> 
    vm = @ 
    vm.sortType = 'name' 
    vm.sortReverse = false 
    return 

angular 
    .module 'dashboard' 
    .controller 'DashboardController', [ 
    DashboardController 
    ] 

我在此自定義指令中附加了ng-click指令。目前，我正在做這樣的：

%th{sortable_column_header: true, ng: {click: 'vm.sortType = "name"; vm.sortReverse = !vm.sortReverse'}, tfield: 'Campaign Name', sortReverse: 'vm.sortReverse'} 

這是一個代碼veeeerrrryyyyyy長線，絕對可以被重構是指令的一部分。我該如何移動：

ng: {click: 'vm.sortType = "name"; vm.sortReverse = !vm.sortReverse'} 

裏面的指令是什麼？所以我可以例如綁定一個來自外部範圍的sortType，因爲這是唯一改變的東西？它必須與鏈接方法有關，但我無法弄清楚如何做到這一點，現在對我來說就是結束了。

Answer 1

你在找什麼是這樣的：

sortableColumnHeader = -> 
    return { 
    restrict: 'A' 
    replace: true 
    scope: 
     sortReverse: '=sortreverse' 
     tfield: '@' 
    link: (scope, element, attrs)-> 
     element.bind 'click', -> 
     // Your code here 

    templateUrl: 'angular/templates/sortable_column_header.html' 
    } 

angular 
    .module 'dashboard' 
    .directive 'sortableColumnHeader', [ 
    sortableColumnHeader 
    ] 

Answer 2

創建指令，並在其中，在鏈接方法

link: function (scope, element, attrs) { 
      element.bind("click", function (event) { 
// Write your code here 
}