呼叫模态功能 - AngularJS

Question

我有哪里我使用ui.bootstrap项目，并根据教程我跟着我必须将它设置与此类似：

'use strict'; 

angular.module('academiaUnitateApp') 
    .controller('EntryCtrl', function ($scope, $modal) { 
    $scope.open = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'modal.html', 
      controller: 'ModalCtrl' 
     }) 
    }; 
    }); 

'use strict'; 

angular.module('academiaUnitateApp') 
    .controller('ModalCtrl', function ($scope, $modalInstance) { 
    $scope.ok = function() { 
     $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 

    $scope.delete = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
    }); 

<script type="text/ng-template" id="modal.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
      <p class="alert alert-danger"> 
       WARNING: By deleting the article all it's nested articles will be moved to the article holding this one. 
       <br/> 
       Do you still want to delete this article? 
      </p> 
      <button class="btn btn-primary" ng-click="delete()">Yes</button> 
      <button class="btn btn-primary" ng-click="cancel()">No</button> 
      <span ng-show="error.state" class="alert alert-danger">{{ error.message }}</span> 
      <span ng-show="done.state" class="alert alert-success">{{done.message}}</span> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
     </div> 
</script> 

这项工作发现和所有，但是如果我想要将$scope.delete功能移到EntryCtrl控制器中而不是将它放在单独的控制器中，该怎么办？

Answer 1

您可以传入匿名控制器。这将允许你在单个文件中拥有所有的逻辑。

在你的情况是这样的：

'use strict'; 

angular.module('academiaUnitateApp') 
    .controller('EntryCtrl', function ($scope, $modal) { 
    $scope.open = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'modal.html', 
      controller: [ 
       '$scope', '$modalInstance', function($scope, $modalInstance) { 
        $scope.ok = function() { 
         $modalInstance.close(); 
        }; 

        $scope.cancel = function() { 
         $modalInstance.dismiss('cancel'); 
        }; 

        $scope.delete = function() { 
         $modalInstance.dismiss('cancel'); 
        }; 
       } 
      ] 
     }) 
    }; 
    }); 

编辑

您可以通过定义resolve功能并增加在内部控制的定义变量传递变量。我已经使用它来以单向方式传递值，但从来没有用于双向绑定。我认为你也应该能够通过外部范围。

我不知道它是否有效，所以要警告！ :)

'use strict'; 

angular.module('academiaUnitateApp') 
    .controller('EntryCtrl', function ($scope, $modal) { 
    $scope.myValue = 'foobar'; 
    $scope.open = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'modal.html', 
      controller: [ 
       '$scope', '$modalInstance', 'outerScope', function($scope, $modalInstance, outerScope) { 
        $scope.ok = function() { 
         $modalInstance.close(); 
        }; 

        $scope.cancel = function() { 
         $modalInstance.dismiss('cancel'); 
        }; 

        $scope.delete = function() { 
         $modalInstance.dismiss('cancel'); 
        }; 
       } 
      ], 
      resolve: { 
       outerScope: function() { 
        return $scope; 
       } 
      } 
     }) 
    }; 
    }); 

PS。没有测试上面的代码，只是把它一起从您提供的代码

欲了解更多详情，请参阅我的答案在这里：

https://stackoverflow.com/a/29461685/3070052