Как использовать jQuery Угловой способ внутри директивы?

Question

Я строю chartist Директиву для моего приложения AngularJS. На мой взгляд, в настоящий момент я понимаю, как интегрировать код jQuery в угловом режиме.

Эта структура использует jQuery для создания всплывающей подсказки. Код здесь:

var $chart = $('.ct-chart'); 

    var $toolTip = $chart 
    .append('<div class="tooltip"></div>') 
    .find('.tooltip') 
    .hide(); 

    $chart.on('mouseenter', '.ct-point', function() { 
    var $point = $(this); 
    var value = $point.attr('ct:value'); 
    $toolTip.html(value).show(); 
    }); 

    $chart.on('mouseleave', '.ct-point', function() { 
    $toolTip.hide(); 
    }); 

    $chart.on('mousemove', function(event) { 
    $toolTip.css({ 
     left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width()/2 - 10, 
     top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40 
    }); 
    }); 

Мой вопрос: Как я должен перевести это на AngularJS способ делать вещи?

1. Я получаю элемент из DOM
2. Добавление нового элемента к нему
3. а затем взаимодействия с этим вновь добавленного элементом

Что бы путь Угловым обрабатывает эти вещи? Является ли 1: 1 «перевод» апробировать, или я должен положить ngHide, ngMouseenter внутри вид?

Answer 1

Вы могли бы заменить $ с angular.element который является таким же, как $ из JQuery

& другая проблема заключается перед добавлением нового элемента в угловом DOM он должен пройти через цикл $ компиляции, в противном случае угловой не будет зарегистрировать ту часть DOM

код

var $chart = $('.ct-chart'); 

    var $toolTip = $chart 
    .append($compile('<div class="tooltip"></div>')(scope)) //compiling newly added element 
    .find('.tooltip') 
    .hide(); 

    $chart.on('mouseenter', '.ct-point', function() { 
    var $point = $(this); 
    var value = $point.attr('ct:value'); 
    $toolTip.html(value).show(); 
    }); 

    $chart.on('mouseleave', '.ct-point', function() { 
    $toolTip.hide(); 
    }); 

    $chart.on('mousemove', function(event) { 
    $toolTip.css({ 
     left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width()/2 - 10, 
     top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40 
    }); 
    }); 

Весь другой код выглядит хорошо для меня.

Answer 2

Вы можете использовать код стиля JQuery внутри AngularJs.For например, получить элемент DOM, вы можете использовать синтаксис Jquery, но у Angular есть синтаксис для этого. С угловым.элементом ([селектор]). Он возвращает вам то же самое , который JQuery делает. Одна вещь else.If вы mousevent функции не определены как функция области angularjs, вам не нужно компилировать шаблон.