Как связать события в угловой директиве

Question

Я новичок в угловом и проблема с привязкой события click к моей директиве.

У меня есть ul-list со ссылками в каждом ли. Когда я нажимаю ссылку, я хочу сделать вызов службы, который добавляет или удаляет идентификатор с щелчками и обновляет список.

При обновлении каждый элемент списка будет показывать, отмечен ли идентификатор или нет.

Может ли кто-нибудь мне помочь?

вид HTML:

<a href="#" class="showbooklist" qtip="12568"> 
    <img src="image.png"> 
</a> 

Директива:

listControllers.directive('qtip', ['boklistorservice', function (boklistorservice) { 
    return { 
     restrict: 'A',     
     controller: ["$scope", "$attrs","$element", "boklistorservice", function ($scope, $attrs,$element, boklistorservice) {        
      boklistorservice.getdata().then(function (data) { //serice call to gett data 
       $scope.booklist = data; 
       $element.qtip({ //use the jquery.tip2.js tooltip plugin 
        content: { 
         text: getcurrentbooklist($attrs.qtip, data.barnenskrypin.booklistor) 
        }, 
        position: { 
         my: 'bottom center', 
         at: 'top center' 
        }, 
        hide: { 
         fixed: true, 
         delay: 300 
        } 
       }); 
      })   
     }] 
    }; 
}]); 

//function returns a string. An ul to show in the toolbox 
var getcurrentbooklist = function (bookid, arr) { 
    var rettext = "<ul>"; 
    $.each(arr, function (item, val) { 
     item; 
     var inlist = false; 
     $.each(val.bookitems, function (i, v) { 
      if (v.bookid == bookid) { 
       inlist = true; 
       return false; 
      } else { 
       inlist = false; 
      } 
     }); 
     if (inlist) { 
      rettext += "<li><a (NEED A CLICK EVENT HERE and pass bookid) > " + val.booklistnamn + "-- MARK </a></li>"; 
     } else { 
      rettext += "<li><a (NEED A CLICK EVENT HERE and pass bookid) >" + val.booklistnamn + "--</a></li>"; 
     } 
    }); 
    rettext += "</ul>"; 
    return rettext; 
}; 

Answer 1

Используйте функцию звена директивы (код тестировался):

listControllers.directive('qtip', ['boklistorservice', function (boklistorservice) { 
    return { 
     restrict: 'A', 
     link: function ($scope, element, attrs) { 
      element.bind('click', function() { 
       //Do your work here 
      }); 
     },    
     controller: ["$scope", "$attrs","$element", "boklistorservice", function ($scope, $attrs,$element, boklistorservice) {        
      boklistorservice.getdata().then(function (data) { //serice call to gett data 
       $scope.booklist = data; 
       $element.qtip({ //use the jquery.tip2.js tooltip plugin 
        content: { 
         text: getcurrentbooklist($attrs.qtip, data.barnenskrypin.booklistor) 
        }, 
        position: { 
         my: 'bottom center', 
         at: 'top center' 
        }, 
        hide: { 
         fixed: true, 
         delay: 300 
        } 
       }); 
      })   
     }] 
    }; 
}]); 

Answer 2

jquery.tip2 добавляет HTML к телу поэтому вам нужно найти содержимое в теле и добавить событие click

$element.qtip(); 
angular.element(document.body).find('[qtip container id or class or element] a').bind('click', function() { 
    //Do your work here 
});