更改 NG-Click 函数

Changing an NG-Click function

本文关键字：函数 NG-Click 更改      更新时间：2023-09-26

所以我有一个调用函数的按钮。该函数将加载笔记并在跨度中显示它们。加载笔记后，我想更改在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()。不知道为什么这样做。

您可以在 HTML 中使用 ng-if 指令，在控制器中使用一个标志值，该值在您显示笔记以处理元素时设置。

例如

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

并在您的控制器中，根据需要设置 注释显示值。

使用 angular 时，您不应该像在代码中那样操作 DOM 元素，声明一个 noteItems 数组并在项目上使用中继器。对于切换，单击函数声明两个函数并在它们之间切换：

var function1 = function(noteItem){
    $http({
       ....
    }).then(function successCallback(res){
       $scope.clickFunction = function2;
    }, function errorCallback(res){
    });
};
var function2= function(noteItem){
    $scope.clickFunction = function1;
};
$scope.clickFunction = function1;
相关文章：