重用 Angular 模态和非模态控制器

Question

我将如何为模态和非模态重用 angular 控制器？我有一个新的业务需求，即在新页面的选项卡中放置模态（只是模态正文）中已经存在的相同表单。

目前我在模态初始化中使用 resolve 将变量传递给模态的控制器。

模态初始化

var modalInstance = $uibModal.open({
    templateUrl: 'myModal.html',
    controller: 'myCtrl',
    resolve: {
        foo: function() { return scope.fooFromScope; },
    }
});

现有控制器

myApp.controller('hrpoConductReviewModalCtrl', ['$scope', 'foo', function($scope, foo) {
    ...
}]);

目前没有在我的模式中使用 $uibModalInstance。

有没有办法从另一个控制器中初始化一个控制器并传递 foo 变量？有一个现有的问题问同样的事情，但主要答案集中在模态初始化中使用 scope 而不是 resolve。

现有问题： How to use the same controller for modal and non-modal form in Angular UI Bootstrap?

Answer 1

如果您使用的是 ui-router，您可以只使用来自 ui-router 的解析：

$stateProvider
    .state('conductReview', {
        url: '/review',
        templateUrl: '/js/templates/review.html',
        controller: 'hrpoConductReviewModalCtrl',
        resolve: {
            foo: function() { return scope.fooFromScope; },
            $uibModalInstance: function () { return null; } // <- workaround if you want to use $uibModalInstance in your controller.
        }
    })

如果您没有使用 ui-router，您一定要检查一下 ;-)

重用 Angular 模态和非模态控制器

Reuse Angular Controller for Modal and Non-Modal

controller

angularjs

angular-ui-bootstrap