Jquery code is not working inside AngularJs functions

Question

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

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.

I am sorry if i am completly un reasonable as i am very new to angular js.

how is editbutton called... you have to pass the even object to editbutton using editbutton($event) from your event handler like ng-click="editbutton($event)" — Arun P Johny
– Arun P Johny, Commented Jan 9, 2014 at 3:37
Also the controller is not the right place to do dom manipulations, you can use a directive for that — Arun P Johny
– Arun P Johny, Commented Jan 9, 2014 at 3:38
I will try with directives. thanks. still not sure how i am gonna do it... Thanks Arun — Samir Shah
– Samir Shah, Commented Jan 9, 2014 at 4:00
@SamirShah this in editbutton method refers to $scope, not the element that is being clicked. — Daiwei
– Daiwei, Commented Jan 9, 2014 at 4:40

fanfan1609 · Accepted Answer · 2014-01-09 03:30:09Z

3

I think you should change

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

to

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

$ maybe conflict between Angular and Jquery

answered Jan 9, 2014 at 3:30

fanfan1609

1792 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samir Shah Over a year ago

I got this warning message "event.returnValue is deprecated. Please use the standard event.preventDefault() instead"

Fizer Khan · Accepted Answer · 2014-01-09 03:59:29Z

1

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

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

}

answered Jan 9, 2014 at 3:59

Fizer Khan

93.6k30 gold badges147 silver badges156 bronze badges

2 Comments

Samir Shah Over a year ago

Yes I know Fizer but there are like 3000+ lines of Jquery Code. I dont have that much time to migrate like this to Angular. Thanks Mate.

Fizer Khan Over a year ago

I feel the same lot of time to write jquery code inside the controller.Always i feel bad, tried to write everything in directive. But I can understand you. If you want Jquery element, use angular.element('.editable'). It might help you.

Corndog · Accepted Answer · 2015-12-15 14:04:39Z

1

Old post, but here's another option. Like @derekshull mentioned, you can do this without jQuery. Here's a similar solution utilizing the ng-disabled directive. The form is disabled when you're not editing it, but is still visible if you need it to be.

ng-disabled="!editing"

Example Fiddle

answered Dec 15, 2015 at 14:04

Corndog

1211 silver badge2 bronze badges

Comments

Daiwei · Accepted Answer · 2014-01-09 04:42:24Z

0

this in editbutton function refers to $scope not the DOM element being clicked. You need a directive so you can easily refer to the element being clicked inside the directive constructor.

edited Jan 9, 2014 at 4:42

answered Jan 9, 2014 at 3:29

Daiwei

44.3k4 gold badges41 silver badges49 bronze badges

Comments

user2571591 · Accepted Answer · 2014-01-10 05:08:00Z

0

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

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.

answered Jan 10, 2014 at 5:08

user2571591

115 bronze badges

Comments

derekshull · Accepted Answer · 2014-06-17 16:58:14Z

0

You don't even need an Angular function to handle this. Just use ng-click and 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.

answered Jun 17, 2014 at 16:58

derekshull

3051 gold badge2 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery code is not working inside AngularJs functions

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related