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
– deceze ♦, Commented Apr 8, 2017 at 8: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
– deceze ♦, Commented Apr 8, 2017 at 8:41
actually i want to add textbox and button dynamically by clicking on "AddItemButton" — maria salahuddin
– maria salahuddin, Commented Apr 8, 2017 at 8:43
Trivial problem if you spend 2 hours reading documentation and tutorials. In any case deceze already answered you problem. — dfsq
– dfsq, Commented Apr 8, 2017 at 9:06

Community · Accepted Answer · 2017-05-23 10:30:46Z

0

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

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Apr 8, 2017 at 9:38

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiran Shinde · Accepted Answer · 2017-04-08 08:58:37Z

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 8, 2017 at 8:58

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

1 Comment

dfsq Over a year ago

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.

Collectives™ on Stack Overflow

AngularJS : Function is not defined error

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related