ng-click not firing in AngularJS while onclick does

Question

I am trying to use AngularJS in my application and have been successful to some extent.

I am able to fetch data and display it to the user. And I have a button in ng-repeat via which I want to post DELETE request. Below is my code which does it.

<div class="navbar-collapse collapse">
    <table class="table table-striped" ng-controller="FetchViewData">
        <tr>
            <td>Name</td>
            <td>ID</td>
            <td>Department</td>
            <td></td>
        </tr>
        <tr ng-repeat="d in viewData">
            <td>{{d.EmployeeName}}</td>
            <td>{{d.EmployeeID}}</td>
            <td>{{d.EmployeeDepartment}}</td>
            <td>
                <button class="trashButton" type="button" 
                name="view:_id1:_id2:_id14:_id24:btnDelete" 
                id="view:_id1:_id2:_id14:_id24:btnDelete" 
                ng-click="deleteRecord('{{d['@link'].href}}')">
                <img src="/trashicon.gif"></button>
            </td>
        </tr>
    </table>
</div>

This is the FetchViewData function which fetches the information and displays it to the user.

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
}

The data is fetched and properly displayed.

But the code in ng-click="deleteRecord('{{d['@link'].href}}')" does not fire when delete button is clicked. In Google Chrome's developer tools I can see valid values are generated for code {{d['@link'].href}} but the code deleteRecord does not get fired. From this question I tried removing the braces and writing only d['@link'].href but it didn't work for me.

When I replace ng-click with onclick the deleteRecord function gets fired.

function deleteRecord(docURL) {
    console.log(docURL);

    $http.delete(docURL);
}

But then I receive the below error.

Uncaught ReferenceError: $http is not defined
deleteRecord
onclick

I am using jQuery 1.10.2 and AngularJS v1.0.8.

pm.calabrese · Accepted Answer · 2014-08-27 15:12:33Z

26

FetchViewData here is a controller, and in your html, where you have ng-controller="FetchViewData", you are telling it to look within that controller's scope for any angular methods and variables.

That means, if you want to call a method on click, it needs to be calling something attached to your controller's scope.

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
    $scope.deleteRecord = function(docURL) {
        console.log(docURL);

        $http.delete(docURL);
    }   
}

Here, the function exists on the scope, and any html that is inside your FetchViewData Controller has access to that scope, and you should be able to call your methods.

It's working when you use on-click because your function exists in the global namespace, which is where on-click is going to look. Angular is very heavily reliant on scoping to keep your namespaces clean, there's lots of info here: https://github.com/angular/angular.js/wiki/Understanding-Scopes

edited Aug 27, 2014 at 15:12

pm.calabrese

3766 silver badges11 bronze badges

answered Oct 22, 2013 at 8:22

B Cotter

9515 silver badges7 bronze badges

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

4 Comments

Naveen Over a year ago

I tried using the code ng-click="FetchViewData.deleteRecord('{{d['@link'].href}}')" and ng-click="deleteRecord('{{d['@link'].href}}')", but in both cases it didn't work.

B Cotter Over a year ago

There will be a problem in your syntax somewhere then - as you can see, this very basic fiddle works - jsfiddle.net/HB7LU/799 Try replacing your method with one without the argument binding (that might be what's throwing your error), and see if it's calling it, so just ng-click="deleteRecord()".

Naveen Over a year ago

Thanks! It finally worked using ng-click="deleteRecord(d['@link'].href)". Thanks again for the GitHub link and JSFiddle.

Ryan Over a year ago

Great job explaining this, helped me out a lot!

Rajsekhar Das · Accepted Answer · 2014-03-19 08:16:22Z

6

INSTEAD of this

ng-click="deleteRecord('{{d['@link'].href}}')"

TRY this

ng-click="deleteRecord(d['@link'].href)"

You don't need to use curly brackets ({{}}) in the ng-click

ENJOY...

answered Mar 19, 2014 at 8:16

Rajsekhar Das

611 silver badge3 bronze badges

Comments

Nitish Kumar · Accepted Answer · 2013-10-22 09:19:20Z

4

  function deleteRecord(docURL) {
       console.log(docURL);

       $http.delete(docURL);
 }

It should be

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

EDIT: change something in html and controller ....

SEE WORKING DEMO

edited Oct 22, 2013 at 9:19

answered Oct 22, 2013 at 8:20

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Comments

subZero · Accepted Answer · 2013-10-22 08:19:16Z

3

The deleteRecord method should be assigned in the current and correct scope

$scope.deleteRecord = function(){
....

answered Oct 22, 2013 at 8:19

subZero

5,1867 gold badges34 silver badges54 bronze badges

2 Comments

Naveen Over a year ago

How would I call this from ng-click?

Naveen Over a year ago

I tried ng-click="deleteRecord('{{d['@link'].href}}')" but it didn't work.

Zarepheth · Accepted Answer · 2016-11-10 22:29:04Z

1

Another possibility for why ng-click does not fire, is that you are apply a CSS style of pointer-events:none; to the element. I discovered that Bootstrap's form-control-feedback class applies that style. So, even though it raises the z-index by 2 so that the element is in front for clicking, it disables mouse-clicks!

So be careful how your frameworks interact.

answered Nov 10, 2016 at 22:29

Zarepheth

2,6212 gold badges35 silver badges53 bronze badges

1 Comment

derekbaker783 Over a year ago

I think this applies to other Bootstrap classes as well.

Shabi_669 · Accepted Answer · 2014-01-26 10:58:04Z

As mentioned, the function should be created inside the scope:

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

To use the function, first drop the "{{ }}" since you are using it from inside an ng-repeat. Another issue is the use of apostrophe in your code, you have two pairs one inside the other... well I am sure you get the problem with that.

Use the function like so:

ng-click="deleteRecord(d['@link'].href)"

Best of luck !

showdev · Accepted Answer · 2015-04-01 17:31:43Z

0

If you want to use as a submit button the set the type to 'submit' as:

<button type="submit" ...

edited Apr 1, 2015 at 17:31

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Apr 1, 2015 at 13:54

frank

1531 silver badge2 bronze badges

2 Comments

Mogsdad Over a year ago

It looks like you intended to say something more - this answer isn't complete.

frank Over a year ago

No idea what I was thinking at the time. ng-click="deleteRecord(d['@link'].href)"Was the right answer

Collectives™ on Stack Overflow

ng-click not firing in AngularJS while onclick does

7 Answers 7

4 Comments

Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

Linked

Related