2015-04-05 14 views
5

Spędziłem trochę czasu grając w wyskakujące okienko AngularJS Bootstrap, a dla intencji działa świetnie, ale chciałbym go powiązać, a to zależny skrypt od tego samego kontrolera, czego nie mogę działaj już teraz. Jeśli utworzę nowy kontroler i wstrzyknę $ modalInstance działa świetnie i mogę przypiąć przycisk zamykania bez żadnych problemów, ale nie chcę drugiego kontrolera, wydaje się, że jest on nadmiernie komplikowany: chcę logiki całego sterownika w formController naprawdę.

Dlaczego miałbym chcieć dwóch kontrolerów? Przejście zakresu pomiędzy dwoma kontrolerami wydaje mi się po prostu przesadzone, a im większy projekt, tym bardziej nie da się nim zarządzać. Czy staram się nadmiernie uprościć to niepotrzebnie? :)

Skrypt:

(function(){ 
    var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
    .controller('formController', function($scope, $modal){ 
     $scope.openModal = function() {       
      var modalInstance = $modal.open({ 
       templateUrl: 'SomeModal.html', 
       controller: 'formController'            
      }); 
     }; 
     $scope.closeModal = function() { 
      // Code needed here :) 
     }; 
    }) 
})(); 

Ciało HTML (przepraszam HTML w skrypcie dla celów demo):

<div ng-controller="formController"> 
     <button class="btn btn-default" ng-click="openModal()">Let's do some stuff!</button> 

     <script type="text/ng-template" id="SomeModal.html"> 
      <div class="modal-header">Do some stuff in this modal y'all.</div> 
      <div class="modal-footer"> 
       <button class="btn btn-info" ng-click="closeModal()">Close</button> 
      </div> 
     </script> 
    </div> 

Odpowiedzią na podstawie wejścia Kaspars' :)

(function(){ 
      var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
      .controller('formController', function($scope, $modal, $log){ 
       $scope.openModal = function() {       
        var modalInstance = $modal.open({ 
         templateUrl: 'SomeModal.html', 
         controller: [ 
          '$scope', '$modalInstance', function($scope, $modalInstance){ 
           $scope.closeModal = function() { 
            $modalInstance.close(); 
           }; 
          } 
         ]       
        }); 
       }; 
      }) 
     })(); 
+0

oddzielny kontroler modalne działa świetnie, jeśli modalne ma być współdzielony przez wielu kontrolerów – gaurav5430

Odpowiedz

7

Walczyłem z tym samym problemem, a najlepszą rzeczą, jaką wymyśliłem, było użycie anonimowej funkcji jako modalnego kontr oller. W ten sposób cała logika jest w tym samym kontrolerze i nie trzeba tworzyć oddzielnego kontrolera dla każdego okna modalnego.

to będzie wyglądać następująco:

(function(){ 
    var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
    .controller('formController', function($scope, $modal){ 
     $scope.openModal = function() {       
      var modalInstance = $modal.open({ 
       templateUrl: 'SomeModal.html', 
       controller: [ 
        '$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) { 
         $scope.data = data; 
         $scope.ok = function() { 
          $modalInstance.close(); 
         }; 
         $scope.closeModal = function() { 
          $modalInstance.dismiss(); 
         }; 
        } 
       ] 
      }); 
     }; 
    }) 
})(); 

PS. Nie testowałem powyższego kodu, po prostu połącz go z dostarczonym kodem i fragmentami z jednego z moich projektów.

+0

Dzięki Kaspars, że pracowała doskonale dodałem rzeczywisty kod, który Uprościliśmy w odniesieniu do oryginalnego pytania :) – NewZeroRiot

0

Można również spróbować

var modalInstance = $modal.open({ 
           templateUrl : 'someTemplate.html', 
           scope : $scope, 
           size : 'md' 
          });