March 26, 2022 Flutter

Call dart function in angular controller initialization

Issue

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?

Solution

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 By – maiermic

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply Cancel reply