Angularjs Skype URI "onclick" issue

Question

Im trying to implement Skype Button on the website Im working on using Angularjs

The code provided by the Skype API is the following

</script>
<div id="SkypeButton_Call_mike_1">
  <script type="text/javascript">
    Skype.ui({
      "name": "dropdown",
      "element": "SkypeButton_Call_mike_1",
      "participants": ["mike"],
      "imageSize": 32
    });
  </script>
</div>

Im using angularjs so the mike pseudo comes from my angular model (Controller).

$scope.user.skypePseudo = "mike"

Then when I change

"participants": ["mike"]

to

"participants": ["{{user.skypePseudo}}"] 

It throws this error

Interpolations for HTML DOM event attributes are disallowed.  Please use the ng- versions (such as ng-click instead of onclick) instead.

The error is clear, it means I cannot use onclick and should use ng-click instead.

I have tried to modifiy the skype-uri.js by replacing all onclick by ng.click but get some compliation errors.

Is there someone that have experienced this before me ? How can I make it working ?

The question could be asked as : is there a way to force angular to accept onclick

Answer 1

I think the best way to achieve that is to create a new directive:

angular.module("yourApp")
.directive("skypeUi", function() {
    return {
        restrict: "E",
        template: "<div></div>",
        replace: true,
        scope: {
            participants: "="
        },
        link: function(scope, element, attrs){
            Skype.ui({
                "name": "dropdown",
                "element": attrs.id,
                "participants": scope.participants,
                "imageSize": 32
            });
        }
    };
});

So you can use like that;

<skype-ui id="SkypeButton_Call_mike_1" participants="participants">
</skype-ui>

And finally in your controller:

$scope.participants = ["mike"];