Доступ к угловому контроллеру из javascript

В настоящее время я разрабатываю приложение angularJS. Я использую Angular-Seed в качестве шаблона для запуска проекта.

Мне нужно создать приложение angularJS, которое работает внутри iframe на странице JSP из другой компании. Они общаются с моим приложением в iframe, используя "iframe.contentWindow.postMessage". Вот пример такого поста:

var btnHandShake = document.getElementById('btnHandShake');
btnHandShake.onclick = function () {
    var dataObject = {
        messagetype: "HANDSHAKE",
        messagecontent: {
            user: {
                username: "username",
                password: "password"
            }
        }
    }

    var message = JSON.stringify(dataObject);
    iframe.contentWindow.postMessage(message, "https://serverurl:8080");
};

В настоящее время у меня есть две страницы в моем приложении angularJS:

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/loading', {templateUrl: 'partials/loading.html', controller: 'LoadingController'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/loading'});
}]);

Страница loading.html выглядит так:

<style>
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
}
</style>

<script>
var opts = {
    lines: 11, // The number of lines to draw
    length: 15, // The length of each line
    width: 10, // The line thickness
    radius: 30, // The radius of the inner circle
    corners: 1, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#000', // #rgb or #rrggbb
    speed: 0.6, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
};

var spinner = null;
var spinner_div = 0;

$(document).ready(function () {
    spinner_div = $('#spinner').get(0);
    if (spinner == null) {
        spinner = new Spinner(opts).spin(spinner_div);
    } else {
        spinner.spin(spinner_div);
    }
});
</script>

<div id='spinner' class='spinner'></div>

Контроллеры выглядят так:

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
controller('LoadingController', ['$scope', function ($scope) {

}])

.controller('MyCtrl2', [function () {

}]);

Мне нужен дополнительный файл javascript, который должен прослушивать это событие iframe.contentWindow.postMessage. Это выглядит так:

function postMessageListener(event) {
registerIncoming(event);

//convert data to object

var message = JSON.parse(event.data);
var responseType = "";

if (message.messagetype === "HANDSHAKE") {
    responseType = "HANDSHAKE_OK";
} 

if (responseType !== "") {
    var response = { messagetype: responseType};
    sendResponse(JSON.stringify(response), event.origin);
} else {
    console.log("Unknown messagetype");
}
}

function sendResponse(response, origin) {
window.top.postMessage(response, origin);
}

//Listen to message from child window
if (window.addEventListener) {
// For standards-compliant web browsers
window.addEventListener("message", postMessageListener, false);
} else {
window.attachEvent("onmessage", postMessageListener);
}

function registerIncoming(event) {

var message = JSON.parse(event.data);

if (message.messagetype === "HANDSHAKE") {

    var applicationScope = angular.element($("#ng-view-id")).scope();

}

$("#logger").prepend('<li class="bg-info">' + new Date().toLocaleTimeString() + " " + message + "</li>");
}

Проблема в том, что я хочу общаться с контроллером из-под проверки 'message.messagetype === "HANDSHAKE"' if. Но я не могу получить к нему доступ. Это из-за этого ng-view в моем index.html? Может быть, есть другой способ сделать это. Любые предложения приветствуются!

С уважением!


person TurboTheunis    schedule 25.03.2014    source источник
comment
Посмотрите на этот stackoverflow.com/ вопросы/15424910/   -  person Jayram    schedule 25.03.2014
comment
Я уже нашел этот ответ, но, похоже, он не работает для меня. Я добавил идентификатор в тег ng-view следующим образом: «‹div id=outer ng-view›‹/div›», а затем использовал «var scope = angular.element($(#outer)).scope (); console.log(область действия);' но до сих пор нет контроллера?   -  person TurboTheunis    schedule 25.03.2014
comment
Jquery загружается на страницу :)   -  person TurboTheunis    schedule 25.03.2014
comment
Что дает console.log(scope) в качестве вывода?   -  person Jayram    schedule 25.03.2014
comment
ChildScope $$childHead: null $$childTail: null $$listenerCount: Object $$listeners: Object $$nextSibling: null $$prevSibling: null $$watchers: null $id: 003 $parent: Scope msg: Superhero this: ChildScope прототип: область действия   -  person TurboTheunis    schedule 25.03.2014
comment
Это все. Вы получаете весь объем и его функции. Зачем тогда нужен контроллер?   -  person Jayram    schedule 25.03.2014
comment
Я добавил в контроллер функцию: controller('LoadingController', ['$scope', function ($scope) { this.testMe = function (message) { alert(message + success); } }]) Когда я зарегистрируйте этот контроллер в консоли, я получаю: ChildScope {$id: 003, это: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…} $$childHead: null $$childTail: null $$ listenerCount: Object $$listeners: Object $$nextSibling: null $$prevSibling: null $$watchers: null $id: 003 $parent: Scope msg: Superhero this: ChildScope proto: Scope   -  person TurboTheunis    schedule 25.03.2014
comment
Таким образом, добавленная функция не видна...   -  person TurboTheunis    schedule 25.03.2014


Ответы (1)


Похоже, мне не нужен javascript для связи с iframe, но это возможно с самим angularJS.

https://github.com/newtriks/angularjs-post-message-testing-project

person TurboTheunis    schedule 25.03.2014