從角度模式模式返回數據

Question

如果已經有人提出這個問題，我很抱歉，但是有可能從角度模式模式返回數據，如果有的話，任何人都可以提供簡短代碼片段如何操作？

從angular-ui模式返回數據是非常好的選擇，但我無法找到綁帶方式。 非常感謝您的答覆。

Answer 1

我想出了一個簡單的方法來實現這一點，API就像angular-ui modal一樣。

您裝點$modal服務：

.config(['$provide', function($provide) { 

    $provide.decorator('$modal', ['$q', '$rootScope', '$delegate', function ($q, $rootScope, $delegate) 
    { 
     return function returnAResultWhenClosingTheModal(options) 
     { 
      var deferred = $q.defer(); 

      if (!options.scope) { 
       options.scope = $rootScope.$new(); 
      } 

      options.scope.$close = function(result) 
      { 
       deferred.resolve(result); 
       this.$hide(); 
      }; 

      // Call the real $modal service to create the modal 
      var modal = $delegate(options); 

      modal.result = deferred.promise; 

      return modal; 
     } 
    } 
    ]); 
}]) 

創建模式是與往常一樣，除了現在每個模式都有一個result屬性，該屬性是當模閉合時得到解決一個承諾：

var myModal = $modal(modalOptions); 

myModal.result.then(function(result) 
{ 
    // I now have access to the result the modal closed with. 
}); 

在模態控制器只需調用在$scope與結果的新$close方法要返回：

// In the controller 
$scope.$close(resultToReturn); 

Answer 2

您可以很容易地從您的angular-strap模式返回任何數據。

假設您有一些對象，應在模態提交後更新。例如，你有一個控制器，彈出你的模式。所有你需要做的就是定義一些處理程序，它應該更新你的數據，通過resolve選項將這個處理程序傳遞給youp模態，並在模態控制器中調用這個處理程序。

示例：
此控制器包含用戶詳細信息並顯示用於更改此數據的模式。

app.controller('userDetailsCtrl', ['$scope', '$modal', function($scope, $modal) { 
    $scope.userDetails = { 
     firstName: 'John', 
     lastName: 'Smith' 
    }; 

    $scope.showChangeUserDetailsModal = function() { 
     var options = { 
      userDetails: angular.copy($scope.userDetails), 
      submit: function(result) { 
       $scope.userDetails = angular.copy(result); 
      } 
     }; 
     $modal({ 
      controller: 'changeUserDetailsCtrl', 
      contentTemplate: '', //Here is your template with some input fields 
      show: true, 
      resolve: { 
       options: function() { 
        return options; 
       } 
      } 
     }); 
    }; 
}]); 

模態的控制器調用句柄submit，傳遞模工作的結果。

app.controller('changeUserDetailsCtrl', ['$scope', 'options', function($scope, options) { 
    $scope.userDetailsDraft = options.userDetails; 

    $scope.submitChanges = function() { 
     options.submit($scope.userDetailsDraft); 
     $scope.$hide(); //Close modal after submit 
    }; 
}]);