Why this angular scope doesn't show in view only if it is after a HTTP request?

Question

I have remarked a strange behavior in my code , I made a button where the action is to set a scope and show a bootstrap modal with the value of this scope
Normally the code should look like this

But that don't work i only get a empty value in the model

var table = $('#data').DataTable();
$('#data tbody').on('click', 'td.details-control,.addsta,.mjump,.mcon,.delwf', function () {    
    if (this.className == "btn btn-danger delwf") {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
            $scope.sworcode = row.data().worcode;
            $scope.slancode = row.data().lancode;
            console.log(row.data().worcode);
            $('#modal-del').modal('show');
            };
}

But if i add a HTTP request like this the value shows up in the modal

var table = $('#data').DataTable();
 $('#data tbody').on('click', 'td.details-control,.addsta,.mjump,.mcon,.delwf', function () {   
        if (this.className == "btn btn-danger delwf") {

            var tr = $(this).closest('tr');
            var row = table.row(tr);

            $http({
                method: 'GET',
                url: localhost + "/test"
            }).then(function successCallback(response) {}, function errorCallback(response) {});
            $scope.sworcode = row.data().worcode;
            $scope.slancode = row.data().lancode;
            console.log(row.data().worcode);
            $('#modal-del').modal('show');

        };
 }

Can anyone explain this please ?

score 0 · Accepted Answer · answered Jul 11 '17 at 09:35

The reason why your code works when you add an http request in your code is that it will triger a $digest cycle which will update the value of your scope variables. Without http also, you can trigger the digest loop by using $scope.$apply()

var table = $('#data').DataTable();
$('#data tbody').on('click', 'td.details-control,.addsta,.mjump,.mcon,.delwf', function () {    
    if (this.className == "btn btn-danger delwf") {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
            $scope.sworcode = row.data().worcode;
            $scope.slancode = row.data().lancode;
            console.log(row.data().worcode);
            $scope.$apply();
            $('#modal-del').modal('show');
            };
}

For more Info How do I use $scope.$watch and $scope.$apply in AngularJS?

Why this angular scope doesn't show in view only if it is after a HTTP request?

1 Answers1