pigfox pigfox - 1 year ago 117
jQuery Question

Call function in jquery from angular controller

I am attempting to build an edit in place function with Angular and jQuery.
It is the jQuery that does the DOM manipulation and Angular does the data.

My quertion is how do I call the jQuery function resetString() from inside $scope.updateString?

You can see the code in action here:


I have the following view:

<div data-ng-app="Demo" data-ng-controller="cntrl">
<div><input type="text" name="string" data-ng-model="string" class="form-control w300" placeholder="Enter string"/></div>
<div><input type="button" value="Submit" class="btn btn-primary" data-ng-click="insert();"/></div>
<table id="strings">
<th colspan="4">String<span class="small">(click to edit)</span></th>
<tr data-ng-repeat="row in data track by $index">
<td class="w100 string" id="string-{{row.id}}">{{row.string}}</td>
<td><button data-ng-click="deleteString(row.id);" class="btn btn-primary">Delete</button></td>
<td><button data-ng-click="updateString(row.id);" class="btn btn-primary save" id="save{{row.id}}">Save</button></td>
<td><button class="btn btn-primary reset_string" id="reset_string{{row.id}}">Reset</button></td>

Here's my Angular app.

var app = angular.module('Demo',[]);

app.controller('cntrl', function($scope, $http){

$scope.insert = function(){
$http.post('/angular/insert', {string:$scope.string})
$scope.msg="Data inserted";

$scope.displayString = function(){
$scope.data = data

$scope.deleteString = function(id){
$http.post('/angular/delete', {'id':id})
$scope.msg = "Data Deleted";

$scope.updateString = function(id){
$scope.newstring = $('#newstring').val();
$http.post('/angular/update', {'id':id, 'string':$scope.newstring})
$scope.msg = "Data Updated";



And here's my jQuery:

$( document ).ready(function() {

var string = '';
var raw_id = '';

$(document).on('click', '.string', function () {
if ($(this).attr('name') == 'newstring')
return false;

string = $(this).html();
raw_id = this.id;
var td_id = this.id.split('-');
var save = '#save' + td_id[1];
var close = '#reset_string' + td_id[1];
var input = '<input class="form-control w100 string" value="' + string + '" type="text" data-ng-model="newstring" name="newstring" id="newstring"/>';

$(document).on('click', '.reset_string', function () {

function resetString(){
//reset <td>
var string_id_td = '#' + raw_id;

//get the numerical id
var td_id = raw_id.split('-');

//hide reset button
var reset_string = '#reset_string' + td_id[1];

//hide save button
var save = '#save' + td_id[1];


Answer Source

It is not advisable to mix jQuery and AngularJS. But if you want to do you can assign resetString to some global scope for example

window.myFunctions = {resetString: resetString}; // in jQuery

and inside AngularJS you can invoke resetString by

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download