Question

我现在正在开发一个包含大量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

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

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

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

  $scope.editing = false;
  $scope.editbutton = function () {
    $scope.editing = true;
  };

}

Answer 3

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

ng-disabled="!editing"

Example Fiddle

Answer 4

this函数中的

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

Answer 5

您可以尝试将 $（'。this'）。parents（'。editable'）; 替换为 $（'。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：

<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>

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

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

6 个答案: