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
}

将on-click指令移动到自定义指令中

2 个答案: