Создание директивы с функцией OnClick (AngularJS)

Question

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

У меня есть таблица, где каждая содержит директиву: мой сдвиг имеет шаблон:

<shift day={{day}} shift={{shift}} status={{status}}> 
    <img ng-if="pic==0" ng-src="images\dislikeR.png" class="like"> 
    <img ng-if="pic==1" ng-src="images\likeR.png" class="like"> 
    <img ng-if="pic==2" ng-src="images\mehR.png" class="like"> 
</shift>  

каждый представляет запрос сдвига, где значение может быть 0,1,2 , что означает «нелюбовь» , "like" и "meh".

Я хочу, чтобы это произошло, когда я нажимаю на элемент, он меняет состояния 0-> 1-> 2 соответственно, изменяя атрибут «статус» и отображаемое изображение. так, как я уже пробовал, используя ng-if, как вы можете видеть.

Как бы добавить функцию OnClick в каждый экземпляр директивы? Это моя попытка, но ничего не срабатывает, когда я нажимаю, я попытался заменить «это» на «смену», по-прежнему не повезло.

MyApp.directive('myShift',function(){ 

    return{ 
     restrict: 'A', 
     scope:{ 
      day: '=', 
      shift: '=', 
      status: '=', 
      pic: "=status" 
     }, 
     templateUrl: "shift.html", 
     controller: function($scope, $element) { 
      $(this).click(function(){ 
       alert("TEST") 
       if($scope.pic==2) 
        $scope.pic=0; 
       else 
        $scope.pic+=1; 
      }); 
     } 
    }; 
}); 

UPDATE:

Все работает, но картинка меняется разве, по щелчку я увеличиваю $ scope.status (это приращение я проверил), однако шаблон не обновляется ... не конечно, проблема заключается не только в ng-if, но и в регулярном выражении e, g {{status}} не обновляется. что может быть неправильно: |

App.directive('myShift',function(){ 

    return{ 
     restrict: 'A', 
     scope:{ 
      day: '=', 
      shift: '=', 
      status: '=' 
     }, 
     templateUrl: "shift.html", 

     controller: function($scope, $element) { 

      $element.on('click', function(){ 

       if($scope.status==2){ 
        alert($scope.status); 
        $scope.status=0; 
        alert($scope.status); 
       } 
       else if($scope.status==0){ 
         alert($scope.status); 
         $scope.status=1; 
         alert($scope.status); 
        } 
        else if($scope.status==1){ 
         alert($scope.status); 
         $scope.status=2; 
         alert($scope.status); 
        } 
      }); 
     } 
    }; 
}); 

Answer 1

MyApp.directive ('myShift', функция() {

return{ 
    restrict: 'A', 
    scope:{ 
     day: '=', 
     shift: '=', 
     status: '=', 
     pic: "=status" 
    }, 
    templateUrl: "shift.html", 
    link: function($scope, $element) { 
     $element.on('click',function(){ 

// сделать что-то услышать

 }); 
    } 
}; 

});

Answer 2

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

Например:

• «сдвиг» является сдвиг
• «myShift» является мой-сдвиг
• 'myShiftIsAwesome' is my-shift-is-awesome

, если вы понимаете это, первое изменение изменить тег из:

<shift day={{day}} shift={{shift}} status={{status}}> 

в

<my-shift day={{day}} shift={{shift}} status={{status}}> 

И закрывающая один.

Вторая проблема, если вы собираетесь использовать Угловое, начать позабыв Jquery я рекомендую вам изменить директиву следующим образом:

MyApp.directive('myShift',function(){ 

    return{ 
     restrict: 'A', 
     scope:{ 
      day: '=', 
      shift: '=', 
      status: '=', 
      pic: "=status" 
     }, 
     templateUrl: "shift.html", 
     controller: function($scope, $element) { 
      $element.on('click', function(){ 
       if($scope.pic==2) 
        $scope.pic=0; 
       else 
        $scope.pic+=1; 
      }); 
     } 
    }; 
}); 

Tha последняя рекомендация, исходный код сработает.

Answer 3

Сделать restict свойство «E» и использовать element вместо this

MyApp.directive('myShift',function(){ 

    return{ 
     restrict: 'E', 
     scope:{ 
      day: '=', 
      shift: '=', 
      status: '=', 
      pic: "=status" 
     }, 
     templateUrl: "shift.html", 
     controller: function($scope, $element) { 
      $element.click(function(){ 

      }); 
     } 
    }; 
}); 

Answer 4

Ok так с помощью Jquery назначить слушателя к элементу сдвига не работает, то решение, как «Хесус Кинтана» сказал было используйте собственную угловую директиву. я просто создал $ scope.clickMe = function() {..} с помощью контроллера директивы и применил ng-click = "clickMe();" на соответствующем теге в шаблоне. Я думаю, угловой чувствителен только к событиям, вызванным в шаблоне угловыми директивами и не регулярными js.

templateUrl: "shift.html", 

     controller: function($scope, $element) { 
      $scope.clickMe = function(){ 
       if($scope.status==2){ 
        alert($scope.status); 
        $scope.status=0; 
        alert($scope.status); 
       } 
       else if($scope.status==0){ 
         alert($scope.status); 
         $scope.status=1; 
         alert($scope.status); 
        } 
        else if($scope.status==1){ 
         alert($scope.status); 
         $scope.status=2; 
         alert($scope.status); 
        } 
      } 

и мой шаблон:

<shift xday={{day}} xshift={{shift}} xstatus={{status}} ng-click="clickMe();"> 

    <img ng-show="status==0" ng-src="images\dislikeR.png" class="like"> 
    <img ng-show="status==1" ng-src="images\likeR.png" class="like"> 
    <img ng-show="status==2" ng-src="images\mehR.png" class="like"> 
</shift><br>