AngularJS: Как вызвать функцию jQuery

Question

Я разрабатываю веб-приложение AngularJS. Мне нужно вызвать функцию jQuery (внесение некоторых изменений в мою разметку), но кажется, что использование функции AngularJS во всех случаях приводит к разрыву функции jQuery. Вот небольшой пример:

$(document).ready(function() { 
    $('h1').click(function() { 
     alert("Title was clicked."); 
    }); 
}); 

См. my JSFiddle.

Если я использую только jQuery, это отлично работает, но если я запустил его с помощью рамки AngularJS, это не сработает.

Почему?

EDIT1 (Off-темы)

Я использую AngularJS Bootstrap Popover с щелчка триггером на иконку. Вот HTML разметка, когда иконка не нажата:

<i class="fa fa-circle" popover="My popover text" popover-trigger="click"></i> 

Когда значок cliked и поповер будет показано, поповер разметка добавляется к иконе:

<i class="fa fa-circle" popover="My popover text" popover-trigger="click"></i> 
<div class="popover right fade in" ...> 
    <div class="arrow"></div> 
    <div class="popover-inner"> 
     <h3 class="popover-title ng-binding ng-hide" ng-bind="title" ng-show="title"></h3> 
     <div class="popover-content ng-binding" bind-html-unsafe="content">My popover text</div> 
    </div> 
</div> 

Я хотел бы add hover CSS-класс для элемента i, когда popover активен.

Можно ли это сделать с помощью AngularJS?

Answer 1

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

Тем не менее, ваш подход к использованию jQuery для управления DOM не является угловым способом работы.

<div ng-app='main' ng-controller='mainCntrl'> 
    <h1 ng-click='click()'>Title</h1> 
</div> 
<script> 
    app = angular.module('main', []) 
    app.controller('mainCntrl', function ($scope) { 
     $scope.click = function(){ 
      alert("Title was clicked") 
     } 
    }) 
</script> 

(я знаю, что есть несколько менее многословный способ написания этого, но я надеюсь, что это делает то, что происходит понятнее)

jsFiddle: http://jsfiddle.net/ph6srf5g/3/

Это отличное нить для понимания различий в мышлении между угловыми и jQuery: "Thinking in AngularJS" if I have a jQuery background?

Я бы действительно предложил вам канаву jQuer y и используйте только Angular. Лично я ограничиваюсь только использованием jQuery внутри директив.

Если у вас есть что-то более сложное, чего вы пытаетесь достичь, то, возможно, вы можете опубликовать его, и мы сможем увидеть, может ли он что-то помочь в создании углового?

Answer 2

Просто измените HTML в вашей скрипке:

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
<h1>Title</h1> 

Обратите внимание, что угловым загружаются последним, поскольку он не должен нарушать функциональность.

Answer 3

Дополнительная Edited Ответ:

Я лично использую эту директиву:

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
.directive('toggleClass', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.bind('click', function() { 
       element.toggleClass(attrs.toggleClass); 
      }); 
     } 
    }; 
}); 

Со следующей HTML:

<p toggle-class="isActive" popover="My popover text" popover-trigger="click">icon</p> 
<style>.isActive {background:green}</style> 

Директива обрабатывает весь яваскрипт и это означает, что контроллер просто нужно обрабатывать поведение веб-приложения и держит ваш html супер чистым.

Я нахожу директивы, запугивающие, поэтому обычно я просто копирую/вставляю заранее разработанные директивы, которые я нахожу в Интернете.