AngularJS：函数未定义错误答案

【问题标题】：AngularJS : Function is not defined errorAngularJS：函数未定义错误
【发布时间】：2017-04-08 08:35:32
【问题描述】：

我有以下代码，我必须在按钮单击时调用 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--;
 }

【问题讨论】：

你不应该在 Angular 中操作原始 DOM，你应该在模板中使用 Angular 指令来根据需要显示或隐藏按钮。
那么确切的错误是什么？ @deceze
当前的问题是您正试图从纯 JavaScript 调用 Angular 范围方法。更大的问题是你对这个按钮的处理方式完全没有棱角。
其实我想通过点击“AddItemButton”动态添加文本框和按钮
如果您花 2 小时阅读文档和教程，这是一个小问题。无论如何，deceze 已经回答了你的问题。

标签： javascript angularjs function button

【解决方案1】：

你不能简单地将一个 html 元素附加到你所做的 dom 中。您需要将 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

【讨论】：

【解决方案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));

【讨论】：

它也无济于事。更接近正确的解决方案但仍然无法工作，因为ng-click 根本没有任何意义，除非编译。