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?

javascriptangularjsskypeskype-uri.js

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating view with *ngIf won't reflect change in property caused by route change

My custom select bar has a feature where products-header__select expands the list when clicked. To achieve this, I created the property expanded to track its current state. Using *ngIf, I toggle its visibility. The functionality works as expected when cli ...

javascripthtmlangular

Tips for integrating JavaScript libraries with TypeScript

I'm looking to add the 'react-keydown' module to my project, but I'm having trouble finding typings for it. Can someone guide me on how to integrate this module into my TypeScript project? ...

javascripttypescript

Only the initial AJAX request is successful, while subsequent requests fail to execute

I am facing an issue with multiple inputs, each requiring a separate AJAX request. < script type = "text/javascript" > $(document).ready(function() { $("#id_1").change(function() { var rating1 = $(this).v ...

javascriptjqueryajax

NodeJs ERROR: Module not found

When trying to launch an instance running ubuntu with express, I encountered a module not found error that does not occur on my Windows machine. Error Message: node:internal/modules/cjs/loader:1085 throw err; ^ Error: Cannot find module './src/c ...

javascriptnode.jsexpressubuntu

Methods for bypassing a constructor in programming

I am working on a code where I need to define a class called programmer that inherits from the employee class. The employee class constructor should have 4 parameters, and the programmer class constructor needs to have 5 parameters - 4 from the employee c ...

javascripttypescriptweb

Using Angular with Firebase to create foreign key relationships and display data using ng

I am currently working with two tables in firebase, namely Departamentos (parent) and Ciudades (child). My challenge is when displaying the cities using ng-repeat, I need to replace the $id of the department with its corresponding name from the Departament ...

angularjsfirebasecrud

Exploring the depths of deep populating in Mongo and Node.js

I am currently struggling with a complex data population issue. var commentSchema = mongoose.Schema({ name: String }); var userSchema = mongoose.Schema({ userId: { type: String, default: '' }, comments: [subSchema] }); var soci ...

javascriptnode.jsmongodbdatabase

IE8 is encountering a null JSON response from the HTTP handler, unlike IE10 and Chrome which are not experiencing this

Here is my JavaScript code snippet: patients.prototype.GetPatient = function(patient_id,callback) { var xmlhttp; var fullpath; try { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { ...

javascriptjsoninternet-explorerinternet-explorer-8

Creating a Client-side Web Application with Node.js

As I search for a versatile solution to bundle an HTML5 web application (without server dependencies) into a single executable app using node.js and the Linux terminal on Ubuntu, I have experimented with tools like wkpdftohtml and phantomjs. However, these ...

javascripthtmlnode.jsmobileubuntu

Can the installation of Canvas be done on a device with the M1 chip?

When attempting to install canvas on a MacBook Pro M1 using the command: npm install --save-dev canvas An error is displayed: npm ERR! code 1 npm ERR! path /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas ... (error message con ...

javascriptnode.js

Include a sub-component N times within the main component, depending on the current state value

I need assistance in adding a child component called ColorBox to the parent component named ColorBoxContainer based on the value stored in state as noOfBoxes: 16. I've tried using a for-loop but it seems like my code is incorrect. Can someone guide me ...

javascriptreactjsreact-nativereact-hooks

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

javascriptphpjqueryhtml

Unexpected behavior of ion-select: No rendering of selected value when applied to filtered data

I came across an unexpected issue with the dynamic data filtering feature of ion-select. In my application, users are required to choose three unique security questions during registration. I have an array of available questions: questions: Array<{isSe ...

javascriptangularionic2

Utilizing HTTPS for OpenWeatherMap API in JavaScript encounters obstruction

I'm currently working on a project with free code camp where I am attempting to create a weather app using the OpenWeatherMap API. However, I have encountered an issue. My project needs to be submitted on Codepen and use HTTPS for geolocation. Due to ...

javascriptapiopenweathermap

How can I retrieve routing parameters in a Vue.js/Nuxt/TypeScript app?

In the process of developing my website based on the Nuxt TypeScript Starter template, I've encountered a challenge. Specifically, I have created a dynamically routed page named _id.vue within my pages folder and am looking to access the id property i ...

javascripttypescriptvue.jsnuxt.js

What is the best way to retrieve specific JSON data from an array in JavaScript using jQuery, especially when the property is

Forgive me if this question seems basic, I am new to learning javascript. I am currently working on a school project that involves using the holiday API. When querying with just the country and year, the JSON data I receive looks like the example below. ...

javascriptjqueryarraysjsonapi

What strategies can I implement to prevent the JavaScript CallStack from becoming overloaded?

The code snippet below outlines the functionality achieved through JavaScript (specifically for a node.js COMET application): A request is sent to the server and held until there is a response. Upon receiving a response, the data is processed, and anothe ...

javascriptjquerynode.jscomet

Utilizing AngularJS element.find results in modifications to my objects

Encountering an issue with angularJS when trying to locate elements. It appears that the objects are being altered when using element.find('type').attr('id' ,someid); Here are some additional details: The directive is only used in on ...

javascriptangularjs

Receiving a 401 error while attempting to make an axios get request with authentication headers

I have been utilizing axios in my React project to fetch data from MongoDB. However, I am facing a challenge with the axios get requests returning a 401 error when I include my auth middleware as a parameter. This middleware mandates that the user must pos ...

javascriptreactjsexpressaxiosjwt

AngularJS mobile navigation menu toggle not functioning properly with the close feature

I am currently developing a simple Single Page Application (SPA) using an HTML template. The template includes a mobile navigation menu, but I am facing issues with it not closing when navigating through routes in AngularJS. Can anyone provide guidance on ...

javascriptjqueryangularjs