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

나는 AngularUI 팀에 의해 작성 Bootstrap components을 사용하는 것이 좋습니다 것입니다. 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