angularjs – 如何在Angular UI Bootstrap中使用相同的控制器进行模态和非模态形式?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在Angular UI Bootstrap中使用相同的控制器进行模态和非模态形式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个注册表格的模式。应该在着陆页底部显示相同的表单,而不是模态。

目前,处理注册模式的控制器将$ 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);
};

干杯!

原文链接:https://www.f2er.com/angularjs/144585.html

猜你在找的Angularjs相关文章