current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 1 down vote favorite

I try to call a dart function in an AngularJS controller initialization, but I get ReferenceError: myFunction is not defined.

index.dart

import 'dart:js';

myDartFunction() {
  return 42;
}

main() {
  context['myFunction'] = (JsObject exchange) {
    exchange['output'] = myDartFunction();
  };
}

My html with AngularJS:

<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
    <meta charset="UTF-8">
    <title>My Title</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <p>{{var}}</p>
    </div>
    <script type="application/dart" src="index.dart"></script>
    <script type="application/javascript" src="../packages/browser/dart.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script>
        angular.module("MyApp", []).controller('MyCtrl', function($scope) {
            var exchange = {};
            myFunction(exchange);
            $scope.var = exchange['output'];
        });
    </script>
</body>
</html>

It seems to me, that context['myFunction'] has not been set yet, when controller gets initialized. How can I wait for it and initialize $scope.var?

share|improve this question

2 Answers 2

up vote 0 down vote

I would suggest to fire an event from Dart after the function was created and execute the code in JavaScript as event handler for this event.

share|improve this answer
    
What kind of event would you fire? Which code would you execute in the event handler? Where can I listen for the event, having access to my angular variable? – MegaMuetzenMike Oct 5 '14 at 5:58
    
You can just call dispatchEvent(new CustomEvent('dart-ready')); (not tested but as far as I remember it should look like this). In JavaScript you can do something like document.addEventListener('dart-ready', doSomething, false); – Günter Zöchbauer Oct 5 '14 at 8:07
    
All right, but how can I access my angular variable in doSomething? – MegaMuetzenMike Oct 5 '14 at 8:18
1  
If your event handler doSomething is a function of your MyCtrl controller this should be quite easy. I don't know Angular.js though and can't tell if this involves some difficulties there. – Günter Zöchbauer Oct 5 '14 at 9:48
1  
This was the hint I needed. I have to call $apply. A typic beginner's mistake. – MegaMuetzenMike Oct 5 '14 at 10:40
up vote 1 down vote accepted

I found out, that it is possible to use window.onload, which is called after my dart function has been exported to JS. Then I use $scope.$apply to change my scope variable.

angular.module("MyApp", []).controller('MyCtrl', function($scope) {
    window.onload = function () {
        $scope.$apply(function () {
            var exchange = {};
            myFunction(exchange);
            $scope.var = exchange['output'];
        });
    }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.