javascript - Angular Js...，ng-click 功能不起作用

Question

我是 AngularJs 的新手，我的问题是，当我单击附加的按钮时，它不会调用该函数或该函数不起作用。

HTML

</tbody>
    <tr>
        <td><input type="text" class="form-control" ng-model="contact.name"/></td>
        <td><input type="text" class="form-control" ng-model="contact.email"/></td>
        <td><input type="text" class="form-control" ng-model="contact.number"/></td>
        <td colspan="2">
        <button class="btn btn-primary btn-block" ng-click="addContact()">Add Contact</button>
        </td>
    </tr>
    <tr ng-repeat="contact in contactlist">
        <td>{{contact.name}}</td>
        <td>{{contact.email}}</td>
        <td>{{contact.number}}</td>
        <td><button class="btn btn-danger" ng-click="removeContact(contact._id)"><i class="glyphicon glyphicon-trash"></i></button></td>
        <td><button class="btn btn-info" ng-click="editContact(contact._id)"><i class="glyphicon glyphicon-pencil"></i></button></td>
    </tr>
</tbody>    

Angular

$scope.editContact = function(id){
    $http.get('/contactlist/' + id).success(function(response){
        $scope.contact = response;

        var addButton = angular.element('#custom_btn');

        addButton.empty();

        addButton.append('<button class="btn btn-success btn-block" ng-click="update()">Update Contact</buton>');
    });
};

$scope.update = function(){
    alert('test');
};

我的代码有什么问题。我的想法是，它与 jQuery 相同.. jquery 附加的所有元素在其函数调用上都会有一个 body ..

提前致谢。

Answer 1

首先请阅读此discusstion .

您可以在 html View 中使用 ng-if 指令代替 JQuery:

<tr>
...
    <td colspan="2" id="custom_btn">
        <button class="btn btn-primary btn-block" ng-click="addContact()">Add Contact</button>
        <button ng-if="isEdited" class="btn btn-success btn-block" ng-click="update()">Update Contact</buton>
    </td>
</tr>

在 editContact 函数中:

$http.get('/contactlist/' + id).success(function(response){
    $scope.contact = response;

    $scope.isEdited = true;
});

注意:如果 update() 出现错误，请在 View 中使用 $parent.update()。