Question

我在使用Angular的多步商店结帐表单中使用iframe处理信用卡付款的3D身份验证。

验证完成后，我需要调用一个函数从iframe中继续下一步。 iframe与父窗口位于同一个域中。但是，调用该函数时出现scope.showStep is not a function错误。

我怎样才能做到这一点？

iframe内容：

<script>
    var scope = parent.angular.element(parent.document.getElementById("checkout-form")).scope();
    scope.$apply(function () {
        scope.showStep('success!')
    });
</script>

结帐控制器：

(function () {
    angular
        .module('app.checkout')
        .controller('CheckoutStep', CheckoutStep);

    CheckoutStep.$inject = ['$scope', '$state'];

    function CheckoutStep($scope, $state) {

        $scope.showStep = function (message) {
            $state.go('checkout.step', { message: message });
        }
    }
})();

HTML：

<div ng-app="app.checkout" id="checkout-form">
    <div ui-view id="checkout-step></div>
    <script type="text/ng-template" id="checkout-step1">
        // template
    </script>
</div>

Answer 1

代码实际上工作正常，但是我从页面中获取了错误的元素。我需要检索视图元素，而不是app元素，因为我使用的是UI路由器。

请注意，如果scope()设置为false，则无法访问debugInfoEnabled。

<script>
    var scope = parent.angular.element(parent.document.getElementById("checkout-step")).controller ();
    scope.$apply(function () {
        scope.showStep('success!')
    });
</script>

如何从iframe中调用角度控制器函数

1 个答案: