AngularJS : Function is not defined error

Question

I have following code in which I have to call RemoveItem() function on button click , But RemoveItem() function not defined error is occurred

JavaScript Code

$scope.AddShoppingItems = function() {
     console.log('clicked add item');

   i++;
         var div= document.createElement('div');
            div.innerHTML = 'Item : <input type="text" name="ShopItem_'+i+'"><input type="button" value="-" onclick="RemoveItem(this)">';
    document.getElementById('AddItemTextbox').appendChild(div);


    }
 $scope.RemoveItem = function(div){
 console.log('-ve clicked');
 document.getElementById('AddItemTextbox').removeChild(div.parentNode);
 i--;
 }

You should not be manipulating the raw DOM to begin with in Angular, you should be using Angular directives in templates to show or hide the button as needed. — deceze, Apr 08 '17 at 08:37
The immediate problem is that you're trying to call an Angular scope method from plain JavaScript. The bigger problem is that your approach to this button is completely un-angularistic. — deceze, Apr 08 '17 at 08:41
actually i want to add textbox and button dynamically by clicking on "AddItemButton" — maria salahuddin, Apr 08 '17 at 08:43
Trivial problem if you spend 2 hours reading documentation and tutorials. In any case deceze already answered you problem. — dfsq, Apr 08 '17 at 09:06

score 0 · Answer 1 · answered Apr 08 '17 at 08:58

0

Just replace this line

div.innerHTML = 'Item : <input type="text" name="ShopItem_'+i+'"> <input type="button" value="-" onclick="RemoveItem(this)">';
';
document.getElementById('AddItemTextbox').appendChild(div);

By

div.innerHTML = 'Item : <input type="text" name="ShopItem_'+i+'"><input type="button" value="-" ng-click="RemoveItem($this)">
document.getElementById('AddItemTextbox').appendChild($compile(div)($scope));

answered Apr 08 '17 at 08:58

Kiran Shinde

5,732
4
24
41

It will not help too. A little closer to proper solution but still not going to work because `ng-click` doesn't mean anything at all, unless compiled. – dfsq Apr 08 '17 at 09:05

score 0 · Accepted Answer · edited May 23 '17 at 10:30

You cannot simply append an html element to a dom aw what you did. You need to compile the html element to your scope then only your events in scope will trigger.

Try this.

$scope.AddShoppingItems = function () {
    console.log('clicked add item');

    i++;
    var div = document.createElement('div');
    div.innerHTML = 'Item : <input type="text" name="ShopItem_' + i + '"><input type="button" value="-" ng-click="RemoveItem(this)">';
    var temp = $compile(div)($scope);
    angular.element(document.getElementById('AddItemTextbox')).append(temp);

}
$scope.RemoveItem = function (div) {
    console.log('-ve clicked');
    document.getElementById('AddItemTextbox').removeChild(div.parentNode);
    i--;
}

Look here for more details. You cannot simply bind onclick event as like you did. Use ng-click instead

AngularJS : Function is not defined error

2 Answers2