angularjs – 如何在Angular UI Bootstrap中使用相同的控制器进

发布时间：2020-12-17 08:14:36 所属栏目：安全来源：网络整理

导读：我有一个注册表格的模式。应该在着陆页底部显示相同的表单，而不是模态。目前，处理注册模式的控制器将$ modalInstance作为$范围等参数之一。如果我将ng-controller =“SignUpCtrl”添加到着陆页中的元素，则它不起作用，因为控制器不是通过$ modal.open方

我有一个注册表格的模式。应该在着陆页底部显示相同的表单，而不是模态。

目前，处理注册模式的控制器将$ modalInstance作为$范围等参数之一。如果我将ng-controller =“SignUpCtrl”添加到着陆页中的元素，则它不起作用，因为控制器不是通过$ modal.open方法创建，所以Angular抱怨Unknown provider：$ modalInstanceProvider< - $ modalInstance。我有一个注册用户的服务(authService.signUp(data).then / catch …)，但是控制器本身有点多 – 处理输入，发出事件(例如使用已翻译的错误消息)，设置cookie等。处理这种情况的最佳方式是什么，而不会复制几乎整个控制器代码？我应该将代码从控制器移动到另一个更高级别的服务？

经过长时间的努力，我发现了一个更简单的方法来重用我们的控制器来模式和正常的情况。

我发现我们可以将调用者的范围传递给模态控制器，所以我将modalInstance推送到$ scope并将其传递给模态控制器。
现在你没有未知的提供者问题，因为$ scope是众所周知的。

下面是一个例子：

CallerController = function($rootScope,...) {
   var modalScope = $rootScope.$new();
   modalScope.modalInstance = $modal.open({
        templateUrl: tempUrl,controller: ReusableModalController,scope: modalScope // <- This is it!
    });

    modalScope.modalInstance.result.then(function (result) {
        // Closed
    },function () {
        // Dismissed
    });
};

ReusableModalController = function($scope,...){
    var dataToSendBack = 'Hello World';
    $scope.modalInstance.close(dataToSendBack);
};

干杯!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!