2015-10-19 3 views
0

У меня есть директивы и шаблон:Перемещение директивы на щелчок, чтобы пользовательские директивы

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 из внешней области, так как это единственное, что меняется? Это должно иметь какое-то отношение к методу , но я не мог понять, как это сделать, и теперь для меня конец дня.

ответ

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 
    ] 
+0

мне нужно .find (ая)? элемент is th, когда он заменяется, все атрибуты должны быть перемещены? или нет ... – Kocur4d

+0

Нет, вам на самом деле не нужно, чтобы теперь, когда я смотрю поближе. Я не понимал, что вы заменили на истину. –

+0

replace устанавливается в true, потому что проблема связана с tr, если это не так. он оказывается вынесенным за пределы таблицы! то же самое, если я поменяю ограничение на «E» по какой-то странной причине, он получает за пределами таблицы – Kocur4d

0

создать директиву и в нем, в методе связи

link: function (scope, element, attrs) { 
      element.bind("click", function (event) { 
// Write your code here 
} 
Смежные вопросы