2014-08-30 3 views
0

Я только начал изучать AngularJS. При попытке использовать тест как Jquery, так и Angularjs вместе возникла проблема, когда казалось, что AngularJs каким-то образом заблокировал Jquery interventino.Конфликт JQuery и AngularJs

В приведенном ниже коде я включаю обработчик события привязки jquery anchor, который блокирует привязку от направления пользователя. Тем не менее, якорь вне углового контроллера работал нормально, а один внутри не работал.

Есть ли в любом случае как Jquery, так и AngularJs без создания пользовательской директивы?

HTML:

<body data-ng-app="AngApp"> 
    <a href="/haha" data-disable>open</a> 
    <div data-ng-controller="demoCrtl"> 
     <div data-ng-switch on="test")> 
      <span data-ng-switch-when="1"><a href="#" data-disable>Cancel</a></span> 
      <span data-ng-switch-default> its default</span> 
     </div> 
    </div> 
</body> 

JavaScript:

var app = angular.module('AngApp',[]); 
    app.controller('demoCrtl', ['$scope', function($scope) { 
     $scope.test=1; 
    }]); 
    $('a[data-disable]').on('click',function(e){e.preventDefault();console.log('ha');}); 

Я использую angularjs 1.3 и Jquery 2,1.

Большое спасибо,

+2

_ «В коде ниже» _ - Какой код? Нажмите «изменить» и добавьте соответствующие JS и html. – nnnnnn

+0

Извините, я пытаюсь выяснить, как добавить ссылку jsfiddle. Вставка кода в блок кода дает мне ошибку при отправке. – MikeNQ

+0

Смешивание углов и jquery - плохая идея - особенно то, как вы пытаетесь это сделать. Я рекомендую вам прочитать этот отличный ответ о переключении с jquery на угловой @ josh-david-miller: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have -a-jquery-background/15012542 # 15012542 – chriskelly

ответ

1

Не использовать JQuery код, как это в вашем контроллере. Вы должны использовать директиву ngClick и привязать ее к действию в вашем контроллере.

На ваш взгляд:

<a ng-click="disable()" ng-disabled="disabled">disable</a> 

В контроллере

$scope.disabled = false; 
$scope.disable = function() { 
    console.log('disable clicked'); 

    // maybe do something else 

    $scope.disabled = true; 
} 

Это не повторить то, что вы пытаетесь сделать, но больше дает пример того, как связать действия в контроллере для элементы в вашем представлении с помощью директивы ngClick, а также отключить элементы с помощью директивы ngDisable.

+0

Спасибо, я понимаю, что angularjs воспринимают архитектуру, полностью отличную от обычного jquery. – MikeNQ

1

Вам не нужно включать в JQuery для вашего приложения. потому что он присутствует в вашем приложении, когда приложение загружается. Если jQuery отсутствует в вашем пути к скрипту, Angular возвращается к своей реализации подмножества jQuery, которое мы называем jQLite.

Проверить angular.element

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