AngularJS Skype URI Button Problem

Question

AngularJS Skype URI Button Problem

Implementing a Skype button in my project using AngularJS has been challenging. Here is the code I am currently working with:

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

When attempting to use the Skype button, it opens a Skype window but displays an error message stating: "Please install Skype application in order to make this call or send a message." Despite having Skype installed on my system already, this message persists. Can someone shed light on why this issue is occurring?

javascript angularjs skype skype-uri.js

Answer 1

Answer №1

Encountered a similar problem... The issue lies in the not-so-pretty code of skype-uri.js...

It declares a global variable Skype, but instead of a namespace with shared functions, it acts as an object instance. Surprisingly, this instance can only properly initialize one Skype button... quite frustrating.

To add another button, you either have to include the script once again to create a new instance of that object, or extract the constructor from the existing instance and use it to create a new one...

Below is a functional 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);
    }
  };
});

Answer 2

Encountered a similar problem... The issue lies in the not-so-pretty code of skype-uri.js...

It declares a global variable Skype, but instead of a namespace with shared functions, it acts as an object instance. Surprisingly, this instance can only properly initialize one Skype button... quite frustrating.

To add another button, you either have to include the script once again to create a new instance of that object, or extract the constructor from the existing instance and use it to create a new one...

Below is a functional 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);
    }
  };
});

AngularJS Skype URI Button Problem

Answer №1

Similar questions

What is the best way to add a radial pattern to a ring using three.js r67?

Discover the process of loading one controller from another controller in Angular JS

What is the best way to incorporate the 'autoskip' functionality into chartjs?

Transmit information to a webpage using jQuery AJAX and the .data() function as you navigate to the page

Having trouble with the JOSN.parse function not functioning properly

Extracting information from a Postgres query in Node.js

The Node.js POST request is unexpectedly returning 'undefined'

The angular.copy() function cannot be used within angular brackets {{}}

Turn the image inside the div with the nth-child selector into a clickable link

I'm running into some issues with flexbox and I'm in need of some assistance to find

Run a PHP statement when a JavaScript condition evaluates to true

What is the best way to halt execution in Express.js following an error caught from an Await request?

The UI-router activates the child state prior to resolving the parent state

Storing the result of an Angular $http.get request in a variable

Ways to initiate animation using CSS when the page loads

Swapping out the standard if/else logic for try/catch error

The Facebook bots are unable to crawl our AngularJS application because the JavaScript is not being properly

The Google map shifts beyond the perceived limits of the world

Error encountered while utilizing a custom third-party component within an Angular project during static analysis

Create proper spacing for string formatting within an AngularJS modal