将数据传递给Twitter的引导模态的角 [英] Passing Data to Twitter Bootstrap Modal in Angular

问题描述

我要显示一个模式对话框询问用户是否要删除帖子与否。我无法弄清楚如何通过我传递中，我也可以提醒的关键参数的关键。

我拿了code从角twitterbootstrap网站，但我不能想出一个方法来传递数据，以确认删除。

谢谢
穆罕默德

  $ scope.deletePost =功能（键，后，事件）{
    警报（键）;
    VAR modalInstance = $ modal.open（{
        templateUrl：deletePost.html'，
        控制器：ModalInstanceCtrl，
        解析：{
            项目：功能（）{
                返回$ scope.posts;
            }
        }，
    }）    modalInstance.result.then（功能（将selectedItem）{
        $ scope.selected = selectedItem属性;
        警报（将selectedItem）;
    }）;
};
VAR ModalInstanceCtrl =功能（$范围，$ modalInstance，物品）{
    $ scope.items =物品;
    $ scope.selected = {
        项目：$ scope.items [0]
    };
    $ scope.ok =功能（）{
        $ modalInstance.close（$ scope.selected.item）;
    };    $ scope.cancel =功能（）{
        $ modalInstance.dismiss（'取消'）;
    };
};
 

解决方案

发送通过解决关键作为一个参数（见的 plunker ）：

  angular.module（'plunker'，['ui.bootstrap']）;
VAR ModalDemoCtrl =功能（$范围，$模式，$日志）{  VAR键= 1000;
  $ scope.items = ['ITEM1'，'ITEM2'，'ITEM3'];  $ scope.open =功能（）{    VAR modalInstance = $ modal.open（{
      templateUrl：myModalContent.html'，
      控制器：ModalInstanceCtrl，
      解析：{
        项目：功能（）{
          返回$ scope.items;
        }，
        按键：功能（）{返回键; }
      }
    }）;    modalInstance.result.then（功能（将selectedItem）{
      $ scope.selected = selectedItem属性;
    }，函数（）{
      $ log.info（'模态在驳回：+新的Date（））;
    }）;
  };
};//请注意，$ modalInstance重新presents模态窗口（实例）的依赖。
//这是不与上述相同的使用的$模式服务。VAR ModalInstanceCtrl =功能（$范围，$ modalInstance，物品，钥匙）{  警报（关键是+键）
  $ scope.items =物品;
  $ scope.selected = {
    项目：$ scope.items [0]
  };  $ scope.ok =功能（）{
    $ modalInstance.close（$ scope.selected.item）;
  };  $ scope.cancel =功能（）{
    $ modalInstance.dismiss（'取消'）;
  };
};
 

I want to show a modal box asking the user if they want to delete a post or not. I can't figure out how to pass the key which I pass in the key argument in which I also can alert.

I took the code from the angular twitterbootstrap site but I can't figure out a method to pass data to confirm the remove.

Thanks 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');
    };
};

解决方案

Send the key via resolve as a parameter (see 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');
  };
};

这篇关于将数据传递给Twitter的引导模态的角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！