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

Answer 1

  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

Answer 2

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

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

<button type="submit" ...