AngularJS：関数がエラー

Question

が定義されていない私は、ボタンのクリックでRemoveItem()関数を呼び出すために持っているのコードを次している、しかし、RemoveItem()機能定義されていないエラーが発生している

のJavaScriptコード

$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--; 
} 

Answer 1

単にあなたが行ったことにhtml要素を追加することはできません。 html要素をスコープにコンパイルする必要があり、スコープ内のイベントだけがトリガされます。

これを試してください。

$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--; 
} 

詳細については、hereをご覧ください。単にonclickイベントをバインドすることはできません。代わりにng-clickを使用してください

Answer 2

だけ

ことで、この行を置き換える

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

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