Jquery代码在AngularJs函数中不起作用

我现在正在开发一个包含大量jquery代码的项目，我正在将其迁移到angular，但它需要尽快交付（没有时间来更改每段代码）。

代码看起来像….

var app = angular.module('audiapp', ['ngResource']); app.controller('audiLayoutCtrl', function ($scope, dataFactory) { $scope.editbutton = function () { //e.preventDefault(); var editable = $(this).parents('.editable'); editable.find('.editable-body').hide(); editable.find('.editable-form').show(); editable.find('.editable-toggle').hide(); }; } 

在这段代码中，editbutton函数被调用但内部的jquery代码无效。

我很抱歉，如果我完全不合理，因为我对角js很新。

Answer 1

我想你应该改变

 var editable = $(this).parents('.editable'); 

至

 var editable = jQuery(this).parents('.editable'); 

$ Angular和Jquery之间可能存在冲突

Answer 2

在控制器中使用Jquery在Angular JS中被认为是不好的做法。 特定元素的隐藏和显示在角度js中非常简单。 你可以这样试试

HTML

使用Javascript

 var app = angular.module('audiapp', ['ngResource']); app.controller('audiLayoutCtrl', function ($scope, dataFactory, $element) { $scope.editing = false; $scope.editbutton = function () { $scope.editing = true; }; } 

Answer 3

老post，但这是另一种选择。 就像@derekshull提到的那样，你可以在没有jQuery的情况下做到这一点。 这是一个使用ng-disabled指令的类似解决方案。 当您不编辑表单时，表单将被禁用，但如果您需要，表单仍然可见。

 ng-disabled="!editing" 

示例小提琴

Answer 4

this在editbutton函数中指的是$scope而不是被点击的DOM元素。 您需要一个指令，以便您可以轻松地引用指令构造函数中单击的元素。

Answer 5

你能尝试替换$（’。this’）。parents（’。editable’）; to $（’。editable parent’）。parents（’。editable’）; 。 可能是$（’this’）不会指向角js内的确切对象

 var app = angular.module('audiapp', ['ngResource']); app.controller('audiLayoutCtrl', function ($scope, dataFactory) { $scope.editbutton = function () { //e.preventDefault(); var editable = $('.editable parent').parents('.editable'); editable.find('.editable-body').hide(); editable.find('.editable-form').show(); editable.find('.editable-toggle').hide(); }; } 

注意 ：

我没试过。 只是一个sugesstion。

Answer 6

你甚至不需要Angular函数来处理这个问题。 只需使用ng-click和ng-show / ng-hide：

因此，如果您单击锚点，它会将编辑设置为true，这将隐藏.editable-body和.editable-toggle …然后它将显示.editable-form。