從angularjs模態對話框服務返回數據

Question

我對AngularJS相當陌生，並且遇到了從模態對話框服務返回數據的問題。基本上，我複製了Dan Wahlin的服務http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx，並從我的控制器中調用它。

myApp.controller('MyController', function($scope, ModalService) { 
    window.scope = $scope; 
    $scope.mydata = {name: ""}; 

    $scope.showModal = function() { 

     var modalOptions = { 
      closeButtonText: 'Cancel', 
      actionButtonText: 'Save', 
      headerText: 'Save Dialog' 
     } 

     ModalService.showModal({}, modalOptions).then(function (result) { 

     }); 
    } 

}); 

然後，我有我的部分，像這樣：

<div class="modal-header"> 
    <h3>{{modalOptions.headerText}}</h3> 
</div> 
<form ng-submit="modalOptions.submit()"> 
<div class="modal-body"> 
    <label>Name</label> 
    <input type="text" data-ng-model="mydata.name"> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button> 
    <button type="submit" class="btn btn-primary">{{modalOptions.actionButtonText}}</button> 
</div> 

這種模式被調用是這樣的：

<button class="btn btn-primary hidden pull-right" id="save" data-ng-click="showModal()">Save</button> 

所以我的問題是我怎麼得到名稱字段的值返回給控制器？我瀏覽過所有的網頁，所有的例子都有打開模塊駐留在控制器中的功能，這使得它更容易，因爲控制器的$ scope也存在於打開模式的功能中。

我嘗試將下面的代碼添加到服務中的「顯示」功能，但它不起作用。

tempModalDefaults.resolve = function($scope) { 
     mydata = function() { 
      return $scope.mydata; 
     } 
    } 

感謝

附：我在我的代碼中將modalService更名爲ModalService，所以這不是錯字。模式打開和關閉，因爲它應該，我只是不能將字段的值傳遞迴控制器。

Answer 1

在您的按鈕，添加data-ng-click="modalOptions.ok(mydata)"

<button type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(mydata)">{{modalOptions.actionButtonText}}</button> 

你可以得到它：

ModalService.showModal({}, modalOptions).then(function (result) { 
       console.log(result.name); 
     }); 

DEMO

如果你想使用modalOptions.submit功能，你需要改變你的代碼有點

在你的HTML中，pa SS的mydata到modalOptions.submit功能：

<form ng-submit="modalOptions.submit(mydata)"> 

模型服務，在show功能替換：

return $modal.open(tempModalDefaults); //remove the .result 

你的控制器：

$scope.showModal = function() { 

     var modalOptions = { 
      closeButtonText: 'Cancel', 
      actionButtonText: 'Save', 
      headerText: 'Save Dialog', 
      submit:function(result){ 
       $modalInstance.close(result); 
      } 
     } 

     var $modalInstance = ModalService.showModal({}, modalOptions); 
     $modalInstance.result.then(function (result) { 
      console.log(result.name); 
     }); 
    } 

DEMO