iFrame의 창 이벤트에서 각도 양방향 바인딩이 업데이트되지 않습니다.

Question

SAML 인증 솔루션에 iFrame을 사용해야한다는 요구 사항이 있습니다. 기본적으로, 우리는 SAML 서비스를 호출하는 페이지에서 Iframe을 생성해야합니다. iFrame이 Auth 객체를 가져 오면 parent.postMessage(authObj)을 해제하여 부모 정보에 대한 인증 정보가 반환되었음을 알립니다.

각도 서비스에서 해당 개체를 캡처하여 나머지 응용 프로그램에서 사용할 수있게하려고합니다.

각도 응용 프로그램이 SAML 토큰이 반환되기 훨씬 전에 부트 스트랩하기 때문에 필자가 작성한 Angular Auth Service는이 토큰을 처리하기 위해 $window에 이벤트 수신기가 있어야합니다. 그것은 작동하지만 서비스가 업데이트 될 때 양방향 경계보기 업데이트가 표시되지 않습니다. 여기에 내가 뭘하는지 보여주는 몇 가지 코드는 다음과 같습니다

각도 서비스 :

angular.module('common.AuthDataModule', []) 

.service('AuthDataService', function($window, $rootScope) { 
var AuthObj = {}; 
AuthObj.params = { 
    "isAuthorized": false, 
    "principal": '', 
    "description": '', 
    "authorizationToken": '' 
}; 


    function setAttributes(element, attributes) { 
    for (var attr in attributes) { element.setAttribute(attr, attributes[attr]); } 
    } 

    var createIframe = (function() { 
    var iframe = document.createElement("iframe"); 
    setAttributes(iframe, { 
     "name": "auth", 
     "id": "myFrame", 
     "src": "https://my.dev.SAML2AuthService", 
     "height": "0", 
     "width": "0", 
     "border": "0" 
    }); 

    document.body.appendChild(iframe); 
    })(); 

    // Listen to auth iframe message 
    var authEvent = function(event) { 
     data = event.data; 
     if (data.isAuthorized === "true" && data.authorizationToken !== null) { 
     AuthObj.params.isAuthorized = data.isAuthorized; 
     AuthObj.params.principal = data.principal; 
     AuthObj.params.description = data.description; 
     AuthObj.params.authorizationToken = data.authorizationToken; 
    } 
    } 
}; 

$window.addEventListener ("message", authEvent, false); 

var getAuth = function() {return AuthObj;}; 

return {getAuth: getAuth}; 
}); 

컨트롤러 :

angular.module("container.WorkspaceCtrl", ['common.AuthDataModule']) 
    .controller("WorkspaceCtrl", function ($scope, AuthDataService, $rootScope) { 
    $scope.AuthObj = AuthDataService.getAuth(); 
}); 

HTML

<pre style="height:250px" class="testinject"> 
    {{AuthObj.params.authorizationToken | json}} 
</pre> 

디버그 할 수 있고 인증 obj 은이 리턴되고, $digest을 강제 실행하면 뷰가 업데이트된다는 것을 알 수 있습니다. 이것은 Angular가 변경 사항을 "보지"않는다고 생각하게 만듭니다. 따라서보기를 업데이트 할 필요가 없습니다. 내가 놓친 게 있니? documentation 가입일

Answer 1

:

rootScope.Scope $ # $ 적용 ([EXP]);

$ apply()는 각도 프레임 워크 외부의 각도로 표현을 실행하는 데 사용됩니다. (예 : 브라우저 DOM 이벤트, setTimeout, XHR 또는 타사 라이브러리). 우리가 을 호출하기 때문에 우리는 적절한 범위 수명주기 인 예외 처리, 시계 실행을 수행해야합니다.

당신은 당신이 당신이 그것을 작동하게 자신의 $digest을 강요하는 이유입니다하는 $digest()을 유발 볼 $apply()에 대한 의사 코드를 보면. 같은

function $apply(expr) { 
    try { 
    return $eval(expr); 
    } catch (e) { 
    $exceptionHandler(e); 
    } finally { 
    $root.$digest(); 
    } 
} 

시도 뭔가 (안된가) :

var authEvent = function(event) { 
    data = event.data; 
    if (data.isAuthorized === "true" && data.authorizationToken !== null) { 
    $rootScope.$apply(function() { 
     AuthObj.params.isAuthorized = data.isAuthorized; 
     AuthObj.params.principal = data.principal; 
     AuthObj.params.description = data.description; 
     AuthObj.params.authorizationToken = data.authorizationToken; 
    }); 
    } 
}