AngularJS: function not defined error when html is generated from Javascript

Question

I amd dynamically generating my edit table from javaScript. But function mentioned via it are not recognaizeable from AngularJS, for that, I am not able to remove and edit my rows.

Here HvacStandards() and checkemail() and showInvite() are only working. for other's i am getting following exception in chorom console:

Errors:

Uncaught ReferenceError: editRow is not defined 
Uncaught ReferenceError: deleteRow is not defined

AngularJs code

$scope.HvacStandards = function () {
        var rowID = $scope.newRow;
        if ($scope.currentRow > 0) {
            saveEdits();
        } else {
            var teamName = $("#teamName").val();
            var email = $("#email").val();
            var sHtml = "<tr id='row"+rowID+"'>"
                    + "<td id=\"tno" + rowID + "\">" + rowID
                    + "</td>"
                    + "<td id=\"tName" + rowID + "\">" + teamName
                    + "</td>" + "<td id=\"mail" + rowID + "\">" + email
                    + "</td>" + "<td><button onclick='editRow(" + rowID
                    + ")'>Edit</button>&nbsp;" + "<button onclick='deleteRow("
                    + rowID + ")'>Delete</button>" + "</tr>";
            $("#inviteTable").append(sHtml);
            $scope.newRow++;
            $("#teamName,#email").val("");
            $scope.emails[$scope.number]=$scope.formData.email;

        }

    };

    $scope.editRow = function(rowID) {
        $('#teamName').val($('#tName' + rowID).html());
        $('#email').val($('#mail' + rowID).html());
        $scope.currentRow = rowID;
    };

    $scope.saveEdits = function (){
        $('#teamName' + currentRow).html($('#tName').val());
        $('#email' + currentRow).html($('#mail').val());
        $("#teamName,#email").val("");
        $scope.currentRow = -1;
    };

    $scope.deleteRow = function (rowID) {
        $('#row' + rowID).remove();
    };

    $scope.showInvite = function(){
        $scope.show = true;
        $scope.formData = {};
    };

and my html is like following:

    <div name="showInviteDiv" id="showInviteDiv">
        <a ng-click="showInvite()" ng-show="!show">Invite a Team</a>
    </div>
    <div class="invite-form" name="inviteTeamDiv" id="inviteTeamDiv"  ng-show="show">
        <form ng-submit="HvacStandards()" novalidate class="css-form"
            name='inviteTeamsForm'>
            <div>
                <input type="text" name="teamName" ng-model="formData.teamName" id="teamName"
                    placeholder="Team Name" style="width: 38%;" required="required" 
                    ng-minlength="6" ng-maxlength="30"> 
                    <input
                    type="text" name="email" ng-model="formData.email" id="email"
                    placeholder="Email" style="width: 38%;" required="required" 
                    ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/" ng-change="checkEmail(form Data.email)" ng-blur="checkEmail(formData.email)">
            </div>
            <div>
                <input type="submit" value="Invite Team" 
                    ng-disabled="inviteTeamsForm.$invalid || isEmailExists"> or <a ng-click="hideInvite()">I'm done sending invites</a>
            </div>

You should read ["Thinking in AngularJS" if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — Satpal, Nov 13 '14 at 06:24

score 1 · Answer 1 · answered Nov 13 '14 at 06:12

In the Table that you are creating, you used onclick instead of ng-click. You need to use ng-click in order to use scope function.

So your HvacStandards function will look like this:

$scope.HvacStandards = function () {
    var rowID = $scope.newRow;
    if ($scope.currentRow > 0) {
        saveEdits();
    } else {
        var teamName = $("#teamName").val();
        var email = $("#email").val();
        var sHtml = "<tr id='row"+rowID+"'>"
                + "<td id=\"tno" + rowID + "\">" + rowID
                + "</td>"
                + "<td id=\"tName" + rowID + "\">" + teamName
                + "</td>" + "<td id=\"mail" + rowID + "\">" + email
                + "</td>" + "<td><button ng-click='editRow(" + rowID
                + ")'>Edit</button>&nbsp;" + "<button ng-click='deleteRow("
                + rowID + ")'>Delete</button>" + "</tr>";
        $("#inviteTable").append(sHtml);
        $scope.newRow++;
        $("#teamName,#email").val("");
        $scope.emails[$scope.number]=$scope.formData.email;

    }

};

I have tried that, Error is removed, but that functions are not being called. i am printing on console to verify that. but no call is made. — vicky, Nov 13 '14 at 06:19
plunkr.co over there you can re-create the problem so that you SO community can visualise the issue — V31, Nov 13 '14 at 06:38

score 0 · Accepted Answer · answered Nov 13 '14 at 08:18

$scope.HvacStandards = function () {
    var rowID = $scope.newRow;
    if ($scope.currentRow > 0) {
        saveEdits();
    } else {
        var teamName = $("#teamName").val();
        var email = $("#email").val();
        var sHtml = "<tr id='row"+rowID+"'>"
                + "<td id=\"tno" + rowID + "\">" + rowID
                + "</td>"
                + "<td id=\"tName" + rowID + "\">" + teamName
                + "</td>" + "<td id=\"mail" + rowID + "\">" + email
                + "</td>" + "<td><button ng-click='editRow(" + rowID
                + ")'>Edit</button>&nbsp;" + "<button ng-click='deleteRow("
                + rowID + ")'>Delete</button>" + "</tr>";
        //$("#inviteTable").append(sHtml); // don't do this
         // use compile in following manner
        $("#inviteTable").append(
                     $compile(sHtml)($scope)
            );
        $scope.newRow++;
        $("#teamName,#email").val("");
        $scope.emails[$scope.number]=$scope.formData.email;

    }

};

score 0 · Answer 3 · answered Dec 12 '17 at 19:31

try this

$scope.HvacStandards = function () {
    var rowID = $scope.newRow;
    if ($scope.currentRow > 0) {
        saveEdits();
    } else {
        var teamName = $("#teamName").val();
        var email = $("#email").val();
        var sHtml = "<tr id='row"+rowID+"'>"
                + "<td id=\"tno" + rowID + "\">" + rowID
                + "</td>"
                + "<td id=\"tName" + rowID + "\">" + teamName
                + "</td>" + "<td id=\"mail" + rowID + "\">" + email
                + "</td>" + "<td><button ng-click='editRow(" + rowID
                + ")'>Edit</button>&nbsp;" + "<button ng-click='deleteRow("
                + rowID + ")'>Delete</button>" + "</tr>";

    // $compile(sHtml)($scope) aissign to variable:
    let shown = $compile(sHtml)($scope);
        $("#inviteTable").append(
                     shown;
            );
        $scope.newRow++;
        $("#teamName,#email").val("");
        $scope.emails[$scope.number]=$scope.formData.email;

    }

};

I would expand on why this approach works and what advantages it has to other approaches. — kwelch, Dec 12 '17 at 19:56

AngularJS: function not defined error when html is generated from Javascript

3 Answers3