Naveen Naveen - 24 days ago 10
Javascript Question

ng-click not firing in AngularJS while onclick does

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.

Answer

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

Comments