javascript - 更改 NG-Click 功能

Question

所以我有一个调用函数的按钮。该函数将加载笔记并在跨度中显示它们。加载笔记后，我想更改在 ng-click 中调用的函数。下面是我的代码。

$scope.loadNotes = function(id){
    $scope.span = document.getElementById("note" + id);

    $scope.span.innerHTML = '<i class="fa fa-spinner fa-4x fa-spin"></i>';

    $http({
        method: "post",
        url: "scripts/getTicketNotes.php",
        data: {
            id: id
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(res){
        $scope.span.innerHTML = res.data;
        document.getElementById("button" + id).setAttribute("ng-click", "hideNotes("+id+")");
        document.getElementById("button" + id).innerHTML = "Hide Notes";

    }, function errorCallback(res){

    });

};

$scope.hideNotes = function(id){
    $scope.spanNotes = document.getElementById("note" + id);

    if($scope.spanNotes.style.display == 'none'){
        $scope.spanNotes.style.display = 'block';
        document.getElementById("button" + id).innerHTML = "Hide Notes";
    }else{
        span.style.display = 'none';
        document.getElementById("button" + id).innerHTML = "Show Notes";
    }
};

问题是该按钮仍将运行 loadNotes 函数，即使 Chrome 中的代码检查器显示 ng-click 的值为 hideNotes ()。但不确定为什么要这样做。

Answer 1

您可以在 HTML 中使用 ng-if 指令，并在 Controller 中使用标记值，该标记值在您显示注释来处理元素时设置。

例如

<div ng-if="!notesShown" ng-click="loadNotes()">
<div ng-if="notesShown" ng-click="hideNotes()">

并在您的 Controller 中，根据需要设置notesShown 值。