Функция Angular неожиданно не работает после использования Jquery Ajax

Question

Я все еще новичок в php программировании, и я хотел бы понять, почему моя угловая функция перестала работать, когда я использую свой пост jquery ajax, где я обновляю значения в своей базе данных.

Вот мой код на моем угловом коде в формате html:

<tfoot ng-app="kembalianApp" ng-controller="kembalianCtrl">
    <tr>
        <th class="has-text-right" colspan="6">TOTAL : </th>
        <th class="has-text-right" ><p ng-model="total" ng-init="total='<?php echo $record2['total'];?>'"><?php echo $total;?></p></th>
    </tr>
    <tr>
        <th class="no-border has-text-right" colspan="6">BAYAR : </th>
        <th style="max-width:100px;padding:0" class="no-border"><input type="text" class="input has-text-right has-text-weight-bold" ng-model="bayar"></th>
    </tr>
    <tr>
        <th class="no-border has-text-right" colspan="6">KEMBALIAN : </th>
        <th class="no-border has-text-right">{{kembalian()}}</th>
    </tr>
</tfoot>

, и вот как мой угловой код

var app = angular.module('kembalianApp', []);
app.controller('kembalianCtrl', function ($scope) {
    $scope.kembalian = function () {
        if (parseInt($scope.bayar - $scope.total) >= 0) {
            return $scope.result = parseInt($scope.bayar) - parseInt($scope.total);
        } else {
            return $scope.result = '-';
        }
    };
});

, а это мой код jquery ajax

$(document).ready(function () {
    $('.kurang').on('click', function () {
        var id_pesanan = $(this).data('id_pesanan');
        var id_makanan = $(this).data('id_makanan');
        var jumlah = $(this).data('jumlah');
        jumlah = parseInt(jumlah);
        jumlah = jumlah - 1;
        $.post('assets/ajax/kurangmenu.php', {
            id_makanan: id_makanan,
            id_pesanan: id_pesanan,
            jumlah: jumlah
        }, function (data) {
            $('#containerpesanan').html(data);
        });
    });

    $('.tambah').on('click', function () {
        var id_pesanan = $(this).data('id_pesanan');
        var id_makanan = $(this).data('id_makanan');
        var jumlah = $(this).data('jumlah');
        jumlah = parseInt(jumlah);
        jumlah = jumlah + 1;
        $.post('assets/ajax/kurangmenu.php', {
            id_makanan: id_makanan,
            id_pesanan: id_pesanan,
            jumlah: jumlah
        }, function (data) {
            $('#containerpesanan').html(data);
        });
    });
});  

Я не понимаю, почему мой угловой не работает после того, как я использую jquery ajax.

Answer 1

Вот ошибка в вашем коде AngularJS: -

<p ng-model="total" ng-init="total='<?php echo $record2['total'];?>'"><?php echo $total;?></p>

ng-модель работает для двусторонней привязки.Тег p не поддерживается для ng-модели.если вы хотите связать тег p, то вы можете использовать ng-bind или {{}}.

<p ng-bind="total"></p>

или

<p {{::total}}></p>