2015-04-05 97 views
5

我花了一些时间来玩AngularJS Bootstrap弹出窗口,意图很好,但我想要做的就是绑定它,并且它是依赖脚本到同一个控制器,我不能现在开始工作就是关闭按钮。如果我创建一个新的控制器,并注入$ modalInstance它工作得很好,我可以wireup关闭按钮没有任何问题,但我不想第二个控制器,它似乎是复杂化:我想我的所有控制器逻辑在formController中真的。

为什么我实际上需要两个控制器?在两个控制器之间传递范围对我来说似乎有些过分,而且越大的项目变得越不可管理。我是否试图过度简化这不必要的? :)

脚本:

(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 :) 
     }; 
    }) 
})(); 

的HTML体(原谅了DEMO的目的脚本的HTML):

<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> 

基于卡斯帕尔斯输入:)

答案
(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

一个独立的模态控制器的伟大工程,如果模式将是由许多控制器 – gaurav5430 2015-12-02 18:02:54

回答

7

我一直在努力解决同样的问题,我想出的最好的东西就是使用匿名函数作为模态控制奥勒。这样所有的逻辑都在同一个控制器中,并且你不必为每个模态窗口创建单独的控制器。

这应该是这样的:

(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。没有测试过上面的代码,只是把它们放在你提供的代码和我的一个项目中的片段中。

+0

谢谢卡斯帕尔斯共享,即工作一种享受,我已经添加了实际的代码我简化了参考原始问题:) – NewZeroRiot 2015-04-05 20:31:41

0

你也可以试试这个

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