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指令，在控制器中使用一个标记值，当您显示笔记来调整元素时，该标记值会被设置。

e.g。

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

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

Answer 2

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

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;

更改NG-Click功能

2 个答案: