javascript Jquery 代码在 AngularJs 函数中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21011095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery code is not working inside AngularJs functions
提问by Samir Shah
I am right now working on a project which has lot of jquery code and i am migrating that to angular, but it needs to deliver as soon as possible(lack of time to change each piece of code).
我现在正在开发一个包含大量 jquery 代码的项目，我正在将其迁移到 angular，但它需要尽快交付（没有时间更改每段代码）。
Code looks like....
代码看起来像......
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();
};
}
here in this piece of code the editbutton function is getting called but jquery code inside is not working.
在这段代码中，editbutton 函数被调用，但里面的 jquery 代码不起作用。
I am sorry if i am completly un reasonable as i am very new to angular js.
如果我完全不合理，我很抱歉，因为我对 angular js 很陌生。
回答by fanfan1609
I think you should change
我觉得你应该改变
var editable = $(this).parents('.editable');
to
到
var editable = jQuery(this).parents('.editable');
$maybe conflict between Angular and Jquery
$也许 Angular 和 Jquery 之间有冲突
回答by Corndog
Old post, but here's another option. Like @derekshull mentioned, you can do this without jQuery. Here's a similar solution utilizing the ng-disableddirective. The form is disabled when you're not editing it, but is still visible if you need it to be.
旧帖子，但这是另一种选择。就像@derekshull 提到的那样，你可以在没有 jQuery 的情况下做到这一点。这是使用该ng-disabled指令的类似解决方案。该表单在您不编辑时被禁用，但如果您需要它仍然可见。
ng-disabled="!editing"
回答by Fizer Khan
Using Jquery inside the controller is considered as bad practice in Angular JS. The hide and show of particular element is very simple in angular js. You can try like this
在控制器中使用 Jquery 在 Angular JS 中被认为是不好的做法。特定元素的隐藏和显示在 angular js 中非常简单。你可以这样试试
HTML
HTML
<div class="editable">
<div class="editable-body" ng-hide="editing"></div>
<a class="editable-toggle" ng-click="editButton()" ng-hide="editing"></a>
<form class="editable-form" ng-show="editing"></form>
</div>
Javascript
Javascript
var app = angular.module('audiapp', ['ngResource']);
app.controller('audiLayoutCtrl', function ($scope, dataFactory, $element) {
$scope.editing = false;
$scope.editbutton = function () {
$scope.editing = true;
};
}
回答by user2571591
Can you try replacing $('.this').parents('.editable');to $('.editable parent').parents('.editable');. may be $('this')will not point to the exact object inside angular js
你可以尝试替换$('.this').parents('.editable'); 到$('.editable parent').parents('.editable'); . 可能是$('this')不会指向 angular 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();
};
}
Note :
笔记 ：
I have not tried it . Just a sugesstion.
我没试过。只是一个建议。
回答by derekshull
You don't even need an Angular function to handle this. Just use ng-click and ng-show/ng-hide:
您甚至不需要 Angular 函数来处理这个问题。只需使用 ng-click 和 ng-show/ng-hide：
<div class="editable">
<div class="editable-body" ng-hide="editing"></div>
<a class="editable-toggle" ng-click="editing=true" ng-hide="editing"></a>
<form class="editable-form" ng-show="editing"></form>
</div>
So if you click the anchor it sets editing to true, which will hide .editable-body and .editable-toggle...then it will show .editable-form.
因此，如果您单击锚点，它会将编辑设置为 true，这将隐藏 .editable-body 和 .editable-toggle...然后它将显示 .editable-form。
回答by Daiwei
thisin editbuttonfunction refers to $scopenot the DOM element being clicked. You need a directive so you can easily refer to the element being clicked inside the directive constructor.
thisineditbutton函数指的$scope不是被点击的 DOM 元素。您需要一个指令，以便您可以轻松地引用在指令构造函数中单击的元素。
