在單個控制器中生成一個對話框。 Angular.js

Question

我根據教程做了這段代碼。我想知道如何使用單個控制器。我想只用一個控制器來生成這個對話框。

http://fiddle.jshell.net/adnu6mmt/2/?utm_source=website&utm_medium=embed&utm_campaign=adnu6mmt

在這個項目中，我目前使用2個控制器。謝謝。

Answer 1

您需要保存模態實例並將其用於相同的控制器中。首先，你需要改變你的HTML這樣的：

<div ng-app="myApp"> 
    <script type="text/ng-template" id="myModal.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Modal title</h3> 
    </div> 
    <div class="modal-body"> 
     Modal content 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" ng-click="close(true)">OK</button> 
     <button class="btn btn-warning" ng-click="close(false)">Cancel</button> 
    </div> 
</script> 

<div ng-controller="MyCtrl"> 
    <input type="button" value="Show modal" ng-click="showModal()"/> 
</div> 

然後在你的控制器：

.controller("MyCtrl", function($scope, $modal) { 

    var modalInstance = null; 

    $scope.close = function (ok, hide) { 
     if(ok) { 
      alert('ok'); 
     } else { 
      alert('cancel'); 
     } 

     modalInstance.dismiss(); 
    }; 

    var modalScope = $scope.$new(); 

    $scope.showModal = function() {  
     modalInstance = $modal.open({ 
      templateUrl: 'myModal.html', 
      scope: modalScope 
     }); 
    } 
}); 

當你想控制你需要訪問同一個控制器的模態請注意，我們將$modal的結果存儲在變量中供以後使用。

這等於將modalInstance注入另一個控制器，該控制器允許您訪問該對象上的close，dismiss或其他函數。