Call angular js method by silverlight control

Question

I've my Web page structured with AngularJs that hosting a Silverlight Control. Now I need to call a function placed in a controller angular from silverlight. This is my controller angular code sample:

    var myModule= angular.module('MyModule', []);

    myModule.controller('MainController', ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) {

        var _self = this;
        _self.testMethodForSilverlight = function (message)
        {
            alert("message: " + message);
        }; 
}]);

and this is the code in my Silverlight viewModel:

public class ViewModel : ViewModelBase, INotifyDataErrorInfo
    { 
      public void CallAngularMethod()
      {
           HtmlPage.Window.Invoke("testMethodForSilverlight ", new[] { "Testing" });
      }
    }

Unfortunately when I call the method the error returned is ("Failed to invoke: testMethodForSilverlight" ). Does anyone have any idea?

score 1 · Accepted Answer · edited May 23 '17 at 11:49

You can try writing your custom Javascript code and do something like this

<script type="text/javascript">
 function callAngularFunc(message) {
    angular.element($("#elementID")).scope().testMethodForSilverlight(message);
 }
</script>

Here, elementID will be the DOM element that the angular controller is bound to.

There is more info related accessing angular data from outside in this post.

Then, in your silverlight code, make the call like this

public class ViewModel : ViewModelBase, INotifyDataErrorInfo
    { 
      public void CallAngularMethod()
      {
           HtmlPage.Window.Invoke("callAngularFunc", new[] { "Testing" });
      }
    }

Thanks, nice solution. I've also found a less angular solution. You can declare a method without '$scope' or without 'this' and this method will be global. But your solution is better. Thanks you very much — Davide, Oct 08 '14 at 13:21

Call angular js method by silverlight control

1 Answers1