skype uri button in angularjs issue

Question

I'm trying to add skype button to my project using AngularJS. Here's the code:

HTML:

<script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>

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

AngularJs:

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

But when i click on that it opens skype window and in the same time shows an error message: "Please install Skype application in order to make this call or send a message." Thogh I aleady have skype installed on my system. Can you please tell me why does it shows like that?

Answer 1

Had the same issue... Problem is that skype-uri.js is written quite ugly...

It exports global variable Skype, but it is not namespace with shared functions - it is object instance, and as I found - that instance can properly initialise only one Skype button... facepalm...

To add another one you need to include that script once again(to create new instance of that object), or get constructor from that instance and create new one using it...

Here is working directive:

app.directive("skypeUi", function () {
  var TrueSkype = Skype.constructor;
  return {
    restrict: 'E',
    scope: {
      participants: "="
    },
    link: function (scope, element) {
      var btn = null;
      function removeButton() {
        if (btn) {
          btn.remove();
        }
      }
      scope.$watch('participants', function () {
        removeButton();
        btn = angular.element('<div></div>');
        var id = "SkypeButton_Call_" + Math.random();
        element.append(btn);
        btn.attr('id', id);
        (new TrueSkype()).ui({
          "name": "call",
          "element": id,
          "participants": participants,
          "imageColor": "white",
          "imageSize": 32
        });
      });
      scope.$on('$destroy', removeButton);
    }
  };
});