jQuery click events не работает с AngularJS

Я в процессе преобразования моего многостраничного веб-сайта php + jquery в одностраничное угловое приложение. Тем не менее, я написал много кода с jquery, так что только намерен обменять php на угловые относительно маршрутизации и т. Д.jQuery click events не работает с AngularJS

Одна проблема, с которой я столкнулся, я не могу понять, что события jquery click Я использую до тех пор, пока конвертер не перестанет работать. Если изменить код, чтобы он запускался из ng-click, он будет работать, также если я вызову функцию из консоли. jquery работает, я поставил некоторый jquery внутри указанной функции, и он работал нормально.

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <link href="css/header.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script> 
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> 
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.2/angularfire.min.js"></script> 
    <script type='text/javascript' src="js/jquery.min.js"></script> 
    <script type='text/javascript' src='js/header.js'></script> 
    <script type='text/javascript' src='main.js'></script> 
</head> 
<header-page></header-page>

main.js:

var mainApp = angular.module('myApp', ['firebase', 'headerPage']); 

mainApp.directive('headerPage', function(){ 
    return{ 
     restrict: 'E', 
     templateUrl: 'html/header.html' 
    } 
});

header.js

(function() { 
    var app = angular.module('headerPage', ['firebase']); 

    app.controller("headController", ['$http', '$firebase', '$scope', '$filter', 
     function($http, $firebase, $scope, $filter) { 
      //most of the code 
     } 
    ]); 
})(); 

$("#myElement").on("click", function() { 
    console.log("clicked"); 
});

источник

2015-05-19 Marty.H

Я в основном хочу удалить php, чтобы я мог заставить его работать для телефонной завивки. У меня есть тысячи строк кода с совершенно функциональным jquery (... ну, я сделал). Мне потребовалось бы много времени, чтобы изменить его без реальной выгоды. –

«событие делегирования jQuery» может работать, как возможное решение ниже. дать ему шанс. –

@Shehryar: Это не сработало. –

Причина в том, что при привязке события к элементу #myElement элемент еще не существует. Поскольку этот элемент визуализируется как часть шаблона директивы, вам нужно будет переместить обработчик привязки внутри функции директивной ссылки. Ну, вы можете технически использовать делегирование делегирования для решения проблемы, но это просто еще один взлом для взлома. Лучше всего было бы использовать ng-click на элементе (о котором вы уже сказали, что попробовали).

источник

2015-05-19 19:51:32 PSL

Попробуйте использовать нг щелчок вместо https://docs.angularjs.org/api/ng/directive/ngClick

<div id="myElement" ng-click="myFunction()"></div>

Затем в контроллер просто объявить функцию

Я знаю, что это действительно не разрешает проблему с jQuery, но помогает сохранить код под одной структурой.

источник

2015-05-19 18:10:24 UsainBloot

альтернативный вариант: если вы хотите придерживаться jquery ..you может быть в состоянии использовать jquery's event delegation:

, например:

HTML

<div id="parent"> 
    <a href="#" class="child">Click Here</a> 
</div>

JS:

$('#parent').on('click', '.child', function() { 
    console.log("click"); 
});

EDIT: добавлена скрипка fwiw: https://jsfiddle.net/ge59sbtp/

источник

2015-05-19 18:25:43

классный, он работает нормально, но почему он не работает ($ ('. Child'). On ('click', function() { console.log ("click"); }); –

jQuery click events не работает с AngularJS

ответ

Смежные вопросы