Отключить ng-click

Question

Я пытаюсь отключить директиву ng-click. У меня есть этот сценарий, я называю в кендо сетки

<script type="text/x-kendo-template" id="PnIssueCell"> 
    <span style="white-space: normal" ng-click="vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE || vm.HistoryPopup(vm.Drawing, true)"> 
     {{ dataItem.ID_PN_ISSUE }} 
    </span> 
</script> 

Я хочу, что если условие истинно vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE действие должно быть включено.

Но что-то не работает правильно, на самом деле строка всегда доступна для кликов.

Любое предложение?

Большое спасибо

Answer 1

Просто небольшая коррекция в вашем коде. Здесь я сначала оцениваю ваше выражение, если оно равно true. он выполняет вашу функцию, иначе это не так.

<script type="text/x-kendo-template" id="PnIssueCell"> 
    <span style="white-space: normal" ng-click="(vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE)?vm.HistoryPopup(vm.Drawing, true):null "> 
     {{ dataItem.ID_PN_ISSUE }} 
    </span> 
</script> 

Надеется, что это помогает :)

Более конкретное решение для вашей проблемы:

Как мы уже говорили в комментариях, Вы хотите удалить значок (значок руки) указателя на что элемент, тогда вы можете попробовать с кнопка элемент вместо span.

<script type="text/x-kendo-template" id="PnIssueCell"> 
    <button type="button" style="white-space: normal" ng-click="vm.HistoryPopup(vm.Drawing, true)" ng-disabled="!(vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE)"> 
     {{ dataItem.ID_PN_ISSUE }} 
    </button> 
</script> 

Теперь вам не нужно беспокоиться об отключении нг нажмите потому, что здесь, когда выражение является ложным, мы отключив кнопку, которая означает, что мы не позволяем любые действия, кликах и в то же время , браузер автоматически изменяет указатель icon to стрелка, так как это отключенная кнопка.

Answer 2

Вы должны использовать && вместо || для примера, чтобы работать. Или использовать тройной оператор (condition ? action : null)

В противном случае, если вы делаете это часто, вы можете создать директиву, чтобы отключить событие щелчка и добавить другие функции (например, переключаясь некоторые CSS класс, чтобы показать, что действие отключено).

Нечто подобное.

HTML код

<span disable-if="vm.Drawing.ID_PN_ISSUE != dataItem.ID_PN_ISSUE" 
     ng-click="vm.HistoryPopup(vm.Drawing, true)"> 
    {{ dataItem.ID_PN_ISSUE }} 
</span> 

Javscript Код

.directive('disableIf', function() { 
    var inhibitHandler = function(event) { 
     event.stopImmediatePropagation(); 
     event.preventDefault(); 
     return false; 
    }; 

    return { 
     retrict: 'A', 
     priority: 100, 
     scope: { disableIf: "=" }, 
     link: function($scope, element) { 
      $scope.$watch('disableIf', function(disable) { 
       if (disable) { 
        element.addClass('disabled') 
        element.on('click', inhibitHandler); 
       } 
       else { 
        element.removeClass('disabled') 
        element.off('click', inhibitHandler); 
       } 

       // you may want to add a handler to remove the 
       // event listener when the scope is destroyed 
      }); 
     } 
    } 
}) 

Answer 3

Почему вы не просто обернуть HistoryPopup функцию и vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE состояние в отдельную функцию? Если условие истинно, тогда вызовите функцию.

Внешний вид (например, ваш шаблон html) не должен содержать логику или включать в нее контроллеры.