La transmission des Données à Twitter Bootstrap Modal Angulaire

Je veux montrer une modal box demandant à l'utilisateur s'il souhaite supprimer un poste ou pas. Je ne peux pas comprendre comment passer de la clé que j'ai passer dans l'argument clé dans lequel je peux aussi alerte.

J'ai pris le code de l'angle de twitterbootstrap site, mais je ne peux pas comprendre un procédé pour transmettre des données de confirmer la suppression.

Merci
Mohammad

$scope.deletePost = function(key, post, event) {
    alert(key);
    var modalInstance = $modal.open({
        templateUrl: 'deletePost.html',
        controller: ModalInstanceCtrl,
        resolve: {
            items: function() {
                return $scope.posts;
            }
        },
    })

    modalInstance.result.then(function(selectedItem) {
        $scope.selected = selectedItem;
        alert(selectedItem);
    });
};


var ModalInstanceCtrl = 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('cancel');
    };
};

InformationsquelleAutor Mohammad Abu Musa | 2014-03-24

Envoyer la clé via le résoudre comme un paramètre (voir plunker):

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  var key = 1000;
  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        },
        key: function() {return key; }
      }
    });

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

//Please note that $modalInstance represents a modal window (instance) dependency.
//It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, items, key) {

  alert("The key is " + key)
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

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

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

Merci c'est ce que je cherchais, en passant la clé de l'modal contrôleur

InformationsquelleAutor zszep

Je conseille Bootstrap composants écrit par le AngularUI de l'Équipe. vous pouvez trouver un grand ensemble de Twitter Bootstrap composants, dont la commande Modale.

Exemple:

html:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

js:

var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

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

//Please note that $modalInstance represents a modal window (instance) dependency.
//It is not the same as the $modal service used above.

var ModalInstanceCtrl = 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('cancel');
  };
};

Live exemple: http://plnkr.co/edit/xIjUONEVhY5lO2kLhV4f?p=preview

InformationsquelleAutor Alex Choroshin

Vous devez vous connecter pour publier un commentaire.