javascript - 使用ng-change时如何修改Angular js中的dom属性？

Question

<table class="table table-sm table-inverse table-responsive table-striped">
    <thead>
    <tr>
        <th>SL No.</th>
            <th>Repository Name</th>
        <th>Active</th>
    </tr>
    </thead>
    <tr ng-repeat="eachData in lstRepositoryData">
        <td>{{$index + 1}}</td>
        <td>{{eachData.repositoryName}}</td>
        <td>
            <label class="switch">
                <input id="activeRepositorySlider"
                       ng-if="eachData.active == true" type="checkbox"
                       checked ng-model="eachData.active"
                       ng-change='change(eachData.active,"{{eachData.repositoryName}}")'
                       dataid="{{eachData.webHookId}}"
                       dataurl="{{eachData.webHookUrl}}">
                <input id="inactiveRepositorySlider"
                       ng-if="eachData.active == false" type="checkbox"
                       ng-model="eachData.active"
                       ng-change='change(eachData.active, "{{eachData.repositoryName}}")'
                       dataid="{{eachData.webHookId}}"
                       dataurl="{{eachData.webHookUrl}}">
                <span class="slider round"></span>
            </label>
        </td>
    </tr>
</table>

我正在尝试修改自定义属性，例如:上面 dom 中的 dataid 和 dataurl。我尝试使用事件并考虑使用 jquery 库来访问 dom 和最近的目标，但事件总是以 undefined 的形式出现。

有没有办法在 http 响应后访问属性并修改它。

$scope.change = function (enabled, repositoryName) {
    var popMessage = '';
    if (enabled) {
        popMessage = 'Enabling this will add a WEBHOOK to this repository. Do you want to continue?'
    } else {
        popMessage = 'Disabling this will delete the WEBHOOK from this repository. Do you want to continue?'
    }
    iziToast.question({
        timeout: false,
        pauseOnHover: true,
        close: false,
        overlay: true,
        toastOnce: true,
        backgroundColor: '#009edb',
        id: 'question',
        zindex: 999,
        title: 'Hey',
        message: popMessage,
        position: 'center',
        buttons: [
            ['<button><b>YES</b></button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                var data = {
                    active: enabled,
                    repositoryName: repositoryName,
                    owner: localStorage.getItem('githubOwner')
                };
                $http.post("/modifyRepository", data).then(modifyRepositoryCallback, modifyRepositoryErrorCallback);
            },
                true],
            ['<button>NO</button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
            }],]
    });
};

function modifyRepositoryCallback(response) {
    if (response.status === 200) {
        $http.post("/createWebHook", response.data).then(createWebHookCallback, createWebHookErrorCallback);
    }
}

function modifyRepositoryErrorCallback(error) {
}

function createWebHookCallback(response) {
    // Here Can I access the particular html node and access the custom attribute and modify them.
    console.log(response);
}

function createWebHookErrorCallback(error) {
    console.log(error);
}

更新

根据@georgeawg 的回答更改为:

$scope.change = function (eachData) {
    var popMessage = '';
    if (eachData.active) {
        popMessage = 'Enabling this will add a WEBHOOK to this repository. Do you want to continue?'
    } else {
        popMessage = 'Disabling this will delete the WEBHOOK from this repository. Do you want to continue?'
    }
    iziToast.question({
        timeout: false,
        pauseOnHover: true,
        close: false,
        overlay: true,
        toastOnce: true,
        backgroundColor: '#009edb',
        id: 'question',
        zindex: 999,
        title: 'Hey',
        message: popMessage,
        position: 'center',
        buttons: [
            ['<button><b>YES</b></button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                var data = {
                    active: eachData.active,
                    repositoryName: eachData.repositoryName,
                    owner: localStorage.getItem('githubOwner')
                };
                $http.post("/modifyRepository", data).then(function (response) {
                    if (response.status === 200) {
                        $http.post("/createWebHook", response.data).then(function (response) {
                                eachData.webHookId = response.data.id;
                                eachData.webHookUrl = response.data.url;
                            }, function (error) {
                                console.log(error);
                            }
                        );
                    }
                }, function (error) {
                });
            },
                true],
            ['<button>NO</button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                eachData.active = !eachData.active;
            }],]
    });
};

完美运行，奇怪的是，这部分还是不行:

eachData.active = !eachData.active;

更新

添加这个有帮助:

$scope.$apply();

Answer 1

只需执行 ng-change="change(eachData)"，然后修改函数:

̶$̶s̶c̶o̶p̶e̶.̶c̶h̶a̶n̶g̶e̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶e̶n̶a̶b̶l̶e̶d̶,̶ ̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶N̶a̶m̶e̶)̶ ̶{̶
$scope.change = function (eachData) {
    var enabled = eachData.active;
    var repositoryName = eachData.repositoryName;

    //...

    function createWebHookCallback(response) {
        console.log(response);
        // Here Can I access the particular html node and access the
        // custom attribute and modify them.
        eachData.webHookId = <<function of response>>;
        eachData.webHookUrl = <<...>>;
    }
};

在 $scope.change 函数中声明 createWebHookCallback 函数 很重要，这样它就可以使用 创建一个闭包>eachData 参数。如果它在 $scope.change 函数的外部，则无法创建闭包。