ng-confirmed-click无效

时间:2017-10-26 21:19:16

标签: jquery angularjs alert

我正在创建一个使用角度js的应用程序,我想删除数据当我们点击删除按钮但在删除之前,它应该给出我正在使用ng-confirmed的确认框。它给了我一个改变并点击'确定',它的调用删除功能,但它没有删除数据。 脚本是

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope, $window) {

$scope.products = [
        {text: 'School', value: 'school'},
        {text:'Business', value: 'business'},
        {text:'Civic Groups', value: 'civic-groups'},
        {text:'College/University', value: 'college-university'},
        {text:'Day Care', value: 'day-care'},
        {text:'Government', value: 'government'},
        {text:'Medical', value: 'medical'},
        {text:'Other', value: 'other'},
        {text:'Sporting Event', value: 'sporting-event'},
    ];
$scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe && !$scope.addMetitle) {return;}        
    if ($scope.products.indexOf($scope.addMe) == -1) {
        $scope.products.push({
text: $scope.addMetitle,
value: $scope.addMe


});
  $scope.addMe = null;
    $scope.addMetitle = null;
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeUser = function(keyIndex) {
      $scope.products.splice(keyIndex, 1);
    }
}).directive('ngConfirmClick', [
    function(){
        return {
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}]);

我的html是

<div ng-app="myShoppingList" ng-controller="myCtrl">


 <ul>
    <li ng-repeat="x in products">{{x.text}}---{{x.value}}      <button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button></li>
  </ul>
  <input ng-model="addMetitle" required>
  <input ng-model="addMe" required>
  <button ng-click="addItem()">Add</button>
  <p>{{errortext}}</p>
</div>

由于

1 个答案:

答案 0 :(得分:0)

scope.$apply()之后添加scope.$eval()

element.bind('click',function (event) {
    if ( window.confirm(msg) ) {
      scope.$eval(clickAction)
      scope.$apply()
    }
});

http://jsfiddle.net/2prwft0m/