Question

我想点击一个按钮生成一个模态弹出窗口。我正在使用ui bootstrap of angular with $ modal service。

现在，当我点击按钮时，我正在编写以下代码。

$scope.modalOpen = function () { var modalInstance = $modal.open({ templateUrl: 'views/includes/someModal.html', controller : //here I want to use the same controller where the current function is getting called }); };

我无法拨打同一个控制器。我犯了什么错吗？我试过谷歌但没有成功:(请建议。提前致谢：）

Answer 1

我假设你想要这样做的全部原因是你可以在模态和当前控制器之间共享数据（状态）。

您可以使用模态配置中的resolve字段来实现此目的，而无需共享控制器。

function CurrentController($scope, $modal) {
  $scope.list = [];

  $scope.modalOpen = function () {
    var modalInstance = $modal.open({
      templateUrl: 'views/includes/someModal.html',
      controller : 'SomeOtherController',
      resolve: {
        list: function() { return $scope.list; }          
      }
    });
  };
}

这意味着list将依赖注入SomeOtherController。

function SomeOtherController($scope, list) {
  $scope.list = list;
}

resolve（类型：Object） - 将被解析并传递的成员作为当地人的控制者;它相当于resolve 路由器中的属性。

在angular-ui bootstrap中查看docs $modal。

Answer 2

如果您从控制器中打开模态，则可以尝试以下操作：

var myCtrl = this;
$scope.modalOpen = function () {
      var modalInstance = $modal.open({
           templateUrl: 'views/includes/someModal.html',
           controller : myCtrl 
      });
};

但我认为重用控制器实例并不是一个好习惯。

Answer 3

您可能不希望它使用相同的控制器。由于示波器未隔离，因此您的模态可以从当前控制器调用函数。您还可以使用如下所示的内联控制器：

您无法使用当前作用域中的函数的原因是您必须为模态提供当前作用域。这样做时要小心。你的模态会弄乱你当前的对象。我继续创建了“保存”和“取消”按钮，以便您可以撤消更改。

HTML

<div ng-controller="simpleController">
    {{ item.title }}
    <button ng-click="open();">Click Me</button>
</div>

模态模板

<script type="text/ng-template" id="views/includes/someModal.html">
    <div class="modal-header">
        <h3 class="modal-title">Title!</h3>
    </div>
    <div class="modal-body">
        title: {{ item.title }}<br/>
        Click the buttons below to change the title throught the controller's function
        <button ng-click="fn('test');">test</button>
        <button ng-click="fn('test 1');">test 1</button>
        <button ng-click="fn('test 2');">test 2</button>
    </div>
    <div class="modal-footer">

        <button ng-click="close(true);">Save</button>
        <button ng-click="close();">Close</button>
    </div>
</script>

的javascript

angular.module("myApp", ['ui.bootstrap']).controller("simpleController", ["$scope", "$uibModal", function($scope, $uibModal){
    $scope.item = { title: "test", stuff: "other stuff"};
    $scope.fn = function(title){
        $scope.item.title = title;
    };
    $scope.open = function () {
        var intialItem = angular.copy($scope.item);
        var modalInstance = $uibModal.open({
            templateUrl: 'views/includes/someModal.html',
            controller:  ["$scope", function(scope){//add other functionality here                  
                scope.close = function(save){
                    if(!save){
                        $scope.item = intialItem;
                    }
                    modalInstance.close();
                }
            }],
            scope: $scope
        }).result.then(function(){
        }, function(){
            $scope.item = intialItem;//modal was dismissed
        });


    };
}]);

无法在角度ui bootstrap $ modal中调用控制器

3 个答案: