Угловая двусторонняя привязка не обновляется при событии окна из iFrame

Question

У меня есть требование использовать iFrame для решения SAML-аутентификации. В принципе, мне нужно создать Iframe на странице, которая вызывает нашу службу SAML. Как только iFrame вернет объект Auth, он отключится от parent.postMessage(authObj), чтобы предупредить родительское окно, в котором была возвращена информация об аутентификации.

Я хочу захватить этот объект в угловом сервисе и сделать его доступным для остальной части приложения.

Поскольку угловые приложения загружаются задолго до того, как маркер SAML возвращается, служба Angular Auth Service, которую я написал, должна иметь прослушиватель событий на $window для обработки этого токена. Он работает, но при обновлении службы я не вижу свое обновление с 2-сторонним просмотром. Вот код, чтобы показать, что я делаю:

Угловая служба:

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> 

Я могу отлаживать и видеть, что auth obj возвращается, и если я заставляю $digest просмотреть обновления. Это заставляет меня думать, что Angular просто не «видит» изменения, поэтому никогда не позаботится обновить представление. Я что-то упускаю?

Answer 1

От documentation:

$ rootScope.Scope # $ применять ([ехр]);

$ apply() используется для выполнения выражения в угловом диапазоне от угловой рамки. (Например, из событий браузера DOM, setTimeout, XHR или сторонних библиотек). Поскольку мы вызываем в угловой каркас, нам необходимо выполнить правильный жизненный цикл обработки исключений, выполняющих часы.

Если вы посмотрите на псевдо-код для $apply() вы видите, что это вызывает $digest(), поэтому вы принуждать $digest по своему усмотрению делает его работу.

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

Try что-то вроде (непроверенных):

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; 
    }); 
    } 
}