Angular js $ scope在Jquery函数内部不起作用

时间:2016-02-11 13:19:23

标签: javascript jquery angularjs

我正在使用Sweet警报来发送警报消息。我有确认提示框,确认后我已经禁用了我的内容但是没有禁用$scopeswal()内部无效,如果点击两次它正在工作。我可以让它工作。 我的HTML代码:

<!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>

和我的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;

    }
});

这个我的示例代码启用工作正常,禁用内部功能确认不起作用。请帮忙。提前谢谢。

1 个答案:

答案 0 :(得分:6)

只有在角度以外发生的事情时才使用$scope.$apply。注意电话

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

&#13;
&#13;
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;

    }
});
&#13;
<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>
&#13;
&#13;
&#13;