Angular js $scope is not working inside Jquery function

Question

I'm using Sweet alert for alert messages. I have confirmation alert box is there, after confirmation i have disable my content but that is not disable $scope is not working inside swal() if clicked twice it is working.how can i make it work. My HTML Code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://limonte.github.io/sweetalert2/dist/sweetalert2.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script type="text/javascript" src="http://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
    <script type="text/javascript" src="js/myscript.js"></script>
</head>
<body ng-app="app" ng-controller="myController">

    Supplier ID:<input type="text" ng-model="supplierID" ng-disabled="disable"/><br>
    Series ID:<input type="text" ng-model="seriesID" ng-disabled="disable"/><br>
    SKU ID:<input type="text" ng-model="skuID" ng-disabled="disable"/><br><br>
    <div class="action-keys">
        <button class="btn btn-default" ng-click="enable()" ng-disabled="!disable">Enable</button>
        <button class="btn btn-default" ng-click="disableCall()" ng-disabled="disable">Disable</button>
    </div>
</body>

and my myscript.js:

angular.module('app', [])
.controller('myController', function($scope) {
    $scope.disable = false;
     $scope.disableCall = function () {
        swal(
            {
            title: 'Warning',text: 'Are you want to disable?',type: 'warning',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',cancelButtonText: 'No',confirmButtonClass: 'confirm-class',cancelButtonClass: 'cancel-class',allowOutsideClick : false
        },function(isConfirm) {
            if (isConfirm) {
                $scope.skuID = '';
                $scope.seriesID = '';
                $scope.supplierID = '';
                $scope.disable = true;
            }else{
                return;
            } 
        });
    }
    $scope.enable = function () {
        $scope.skuID = '';
        $scope.seriesID = '';
        $scope.supplierID = '';
        $scope.disable = false;

    }
});

This my sample code enable is working fine, disable function inside confirm not working. Please help on this. Thanks in advance.

when update scope outside angular context you need to notify angular to run a digest in order to see changes reflected in view — charlietfl
– charlietfl, Commented Feb 11, 2016 at 13:22
@charlietfl- how can i notify. I'm new to AngularJs. Please help. — Rajesh Narravula
– Rajesh Narravula, Commented Feb 11, 2016 at 13:23

Medet Tleukabiluly · Accepted Answer · 2016-02-11 13:25:00Z

6

Just use $scope.$apply when something happening outside of angular. Notice the call

$scope.$apply(function(){
    //everything here will trigger digest cycle
    //everything...
});

angular.module('app', [])
.controller('myController', function($scope) {
    $scope.disable = false;
     $scope.disableCall = function () {
        swal(
            {
            title: 'Warning',text: 'Are you want to disable?',type: 'warning',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',cancelButtonText: 'No',confirmButtonClass: 'confirm-class',cancelButtonClass: 'cancel-class',allowOutsideClick : false
        },function(isConfirm) {
            if (isConfirm) {
                $scope.$apply(function(){
                  $scope.skuID = '';
                  $scope.seriesID = '';
                  $scope.supplierID = '';
                  $scope.disable = true;
                });
            }else{
                return;
            } 
        });
    }
    $scope.enable = function () {
        $scope.skuID = '';
        $scope.seriesID = '';
        $scope.supplierID = '';
        $scope.disable = false;

    }
});

<link rel="stylesheet" href="http://limonte.github.io/sweetalert2/dist/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="http://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>


<div ng-app="app" ng-controller="myController">

    Supplier ID:<input type="text" ng-model="supplierID" ng-disabled="disable"/><br>
    Series ID:<input type="text" ng-model="seriesID" ng-disabled="disable"/><br>
    SKU ID:<input type="text" ng-model="skuID" ng-disabled="disable"/><br><br>
    <div class="action-keys">
        <button class="btn btn-default" ng-click="enable()" ng-disabled="!disable">Enable</button>
        <button class="btn btn-default" ng-click="disableCall()" ng-disabled="disable">Disable</button>
    </div>
</div>

answered Feb 11, 2016 at 13:25

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

paul trone Over a year ago

you could also consider wrapping it in a $timeout callback with no duration parameter, it will wait until the current digest is complete and kick off another one, it avoids calling $apply while a digest is still running.

Rajesh Narravula Over a year ago

@paultrone- If that improves the solution, please post your answer.

Collectives™ on Stack Overflow

Angular js $scope is not working inside Jquery function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related