Accessing angular controller from javascript

Question

I'm currently developing an angularJS application. I'm using Angular-Seed as a template to start of the project.

I need to create an angularJS application that's running inside an iframe on a JSP page form another company. They communicate with my application in the iframe using "iframe.contentWindow.postMessage". Here's an example of such a post:

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

I currently have two pages in my angularJS application:

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

The loading.html page looks like this:

<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>

The controllers look like this:

'use strict';

/* Controllers */

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

}])

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

}]);

I need an extra javascript file that needs to listen for this iframe.contentWindow.postMessage event. It looks like this:

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

The problem is that I want to communicate with the controller from within the 'message.messagetype === "HANDSHAKE"' if check. But I can't seem to access it. Is it because of this ng-view on my index.html? Maybe there is another way to do this. Any suggestions are welcome!

Kind regards!

Answer 1

Looks like I don't need javascript to communicate with the iframe, but it's possible with angularJS itself.

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