Justin808
Justin808

Reputation: 21522

angular ui.bootstrap - I'm trying to get a confirm dialog working (really any dialog at this point)

I'm looking here at the $modal service. I'm trying to implement a confirm dialog when the user clicks a delete button...

Right now I've got:

'use strict';

angular.module('dashboard.build').controller('BuildCtrl', ['$scope', '$modal', 'BuildSrvc', function($scope, $modal, BuildSrvc) {
  BuildSrvc.refreshBuilds(function(builds) {
    $scope.builds = builds;
  });

  $scope.deployBuild = function(build) {
  }

  $scope.deleteBuild = function(build) {
    var modalInstance = $modal.open({
      templateUrl: 'html/buildDelete.html',
      controller: 'buildDeleteCtrl',
      resolve: {
        items: ['Delete', 'Cancel']
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  }
}]);


angular.module('dashboard.build').controller('buildDeleteCtrl', ['$scope', '$modalInstance', 'data', function($scope, $modalInstance, items) {
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss(null);
  };
}]);

When I try to click the delete button, the $scope.deleteBuild is called but I get an error: Argument 'fn' is not a function, got string. Not really sure whats going on as I'm still learning. any pointers on how to correct this?

Upvotes: 0

Views: 2508

Answers (1)

Pasha Riger
Pasha Riger

Reputation: 314

Inside of your modal resolve, you have:

  resolve: {
    items: ['Delete', 'Cancel']
  }

The 'items' expects a function to return successfully. This has to do with promises (probably), which I cannot explain at the moment, but to fix your bug try this:

resolve: {
    items: function () {
        return ['Delete','Cancel'];
    }
}

Upvotes: 1

Related Questions