Call dart function in angular controller initialization

Question

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?

maiermic · Accepted Answer · 2014-10-05 11:16:59Z

1

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

answered Oct 5, 2014 at 11:16

maiermic

4,9849 gold badges43 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2014-10-04 20:50:30Z

0

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.

answered Oct 4, 2014 at 20:50

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

7 Comments

maiermic Over a year ago

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?

Günter Zöchbauer Over a year ago

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

maiermic Over a year ago

All right, but how can I access my angular variable in doSomething?

Günter Zöchbauer Over a year ago

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.

maiermic Over a year ago

This was the hint I needed. I have to call $apply. A typic beginner's mistake.

|

Collectives™ on Stack Overflow

Call dart function in angular controller initialization

index.dart

My html with AngularJS:

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.dart

My html with AngularJS:

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related