將數據傳遞給Twitter Bootstrap Modal中的角度

Question

我想顯示一個模式框，詢問用戶是否要刪除帖子。我無法弄清楚如何傳遞我在關鍵論證中傳遞的關鍵信息，我也可以提醒。

我從角twitterbootstrap網站的代碼，但我不知道一種方法來傳遞數據，以確認刪除。

感謝 穆罕默德

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

Answer 1

發送經由解析的密鑰作爲參數（見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'); 
    }; 
}; 

Answer 2

我會建議使用Bootstrap components由AngularUI小組撰寫。你可以找到一套很棒的Twitter Bootstrap組件，包括Modal控件。

實施例：

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

直播例如：http://plnkr.co/edit/xIjUONEVhY5lO2kLhV4f?p=preview