Passing variables with AngularJS and Typescript using a service

Currently in the process of developing an application using AngularJS, I am faced with the challenge of passing a URL when clicking on a menu button in order to utilize that URL within an iframe on another view controlled by a separate controller. Despite extensive efforts and scouring through resources like Stackoverflow, I have yet to find a solution to this issue.

Service:

module Services {
    export class PassUrlService {

        getUrl;
        setUrl;
        givenUrl;

        constructor($scope) {
            this.getUrl = function() {
                return this.givenUrl;
            }

            this.setUrl = function (value: string) {
                this.givenUrl = value;
            }
        }

    }
}

Controller:

module Controllers {
    export class MainController {

        data = [];
        sce;
        IframeUrl;

        constructor($scope, $sce) {
            $scope.data = this.data;
            $scope.vm = this;
            this.sce = $sce;
        }

        setIframeUrl = function (url) {
            this.IframeUrl = Services.PassUrlService.setUrl(this.sce.trustAsResourceUrl(url));
            debugger;
        }

    }
}

Encountering the following error message:

error TS2339: Property 'setUrl' does not exist on type 'typeof PassUrlService'.

I am hopeful that someone out there can provide guidance on resolving this problem. Thank you in advance for your assistance!

Answer №1

It appears that the Service is not being properly injected into the controller. Give this code snippet a try:

service: Services.PassUrlService

constructor($scope, $sce, service: Services.PassUrlService ) {
        $scope.data = this.data;
        $scope.vm = this;
        this.sce = $sce;
        this.service = service
    }

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

The Print Preview Displays No Content When an External Stylesheet Reference is Included in the Printable HTML Content

Is there a way to print the contents of a DIV on a webpage? Currently, I am using JavaScript to retrieve the contents of the div and then passing it to a new window object where I call the .print() function. The text contents and images are displayed corre ...

Trimming decimal points from large numbers using Javascript

Having trouble with a function that is supposed to format numbers in a more visually appealing way. It's glitchy - for example, 400 displays as 4H, which is correct. However, 430 displays as 4.3H, which is acceptable, but then 403 displays as 4.03H, w ...

How to enable the Copy to Clipboard feature for multiple buttons and transition from using an ID to a class identifier

Can someone please assist me? I have a copy to clipboard function that works well for IDs and a single button on my website. However, I need to modify it to work for multiple buttons and values with a class identifier. Unfortunately, I am unsure how to mak ...

Guidelines for attaching a div to the bottom of a page?

I have a navigation menu inside div.wrapper, and I am trying to make the div.wrapper stick to the footer. <div class="wrapper"> <div id="menu"> <ul> <li>1.</li> <li>2.</li> ...

Tips for submitting a form using javascript while preventing the default action

Looking for a way to submit a form in Javascript and prevent the default action? Let's explore how you can achieve this. Initially, my HTML form with the ID "contact_form" had an input element like so: <input id="contact_send_msg" type="submit" val ...

Utilize Google Maps geocoding functionality to pinpoint a location and then

I've encountered this strange phenomenon, but first let's take a look at the code: HTML <div ng-app='maptesting'> <div ng-controller="MapCtrl"> <div id="map_canvas" ui-map="myMap" style ...

What is the correct method for downloading an Excel file in a Vue.js application?

I am having difficulty downloading an Excel file in xlsx format using my Vue.js application. The Vue.js application sends a post request to the Node.js application which then downloads the Excel file from a remote SFTP server. The backend application is fu ...

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

I've been struggling to implement a drop-down select in conjunction with a table on a page using knockout bindings. The issue arises when I try to use the mapping options in the knockout binding plugin – either the drop-down or the table behaves inc ...

Switch Object to WebElement or SearchContext in JavaScript

Looking for the best way to convert an Object to WebElement or SearchContext using JavaScript? In Java, casting as `(WebElement)` or `(SearchContext)` works fine. However, attempting the same in JavaScript with `as Webelement` or `as SearchContext` result ...

What causes a 404 error when using a router in Express/node.js?

I've recently created an Express app and set up a custom route (/configuration). However, when I try to access http://localhost:3000/configuration, I keep getting a 404 Not Found error from the server. I've reviewed the code but can't seem t ...

Engage with and rearrange JSON data

Upon receiving data from the endpoint, I realized that it needed some modifications before being suitable for display in a table. The initial example data looks like this: const data = [ { Year: 2017, OriginalIntBalanceOverdue: 0.0, D ...

Calculating the sum of values in a specific position within an array of Javascript

Here is an array that needs to be updated: let arr = [ { "Id": 0, "Name": "Product 1", "Price": 10 }, { "Id": 0, "Name": "Product 1", "Price": 15 } ] I am looking for a way to add 1 to all the Price values, resulting in: let Final_arr = [ { ...

I have been tirelessly attempting to resolve this issue, yet all my efforts have proven futile thus

Encountering an issue with web packs and nextjs. import NextDocument, { Html, Head, Main, NextScript } from 'next/document' import theme from '../libs/theme.js' export default class Document extends NextDocument { render() { retu ...

Struggling to vertically align elements within iron-pages

Struggling to vertically center the content within iron-pages (nested in a paper-drawer-panel). Check out the code snippet below: <paper-drawer-panel id="drawerPanel" responsive-width="1280px"> <div class="nav" drawer> <!-- Nav Conte ...

Surprising behavior encountered while utilizing fsPromises.open with Node.js

As I work on a larger app, I encounter an issue with a file writing operation. I am utilizing fsPromises to generate an autosave file, but the path variable seems to lose its value between a console log for debugging and the actual call to open the file. I ...

Angular 2 ngSubmit triggers unexpectedly on occasions when it is not supposed to

Currently, I am working on developing an Ionic 3 application with Angular 2 and TypeScript. In the app, there is a form that is responsible for sending data to our server. The issue I am facing is that whenever I click on the following button: <butto ...

Using a pool.query with async/await in a for-of loop for PostgreSQL

While browsing another online forum thread, I came across a discussion on using async/await with loops. I attempted to implement something similar in my code but am facing difficulties in identifying the error. The array stored in the groups variable is f ...

Refresh component when mobx store is modified

I am utilizing chart.js to display real-time price changes from the backend. The backend updates the frontend with new prices as they change, and stores the priceData (array) in a mobx store named priceChartStore. I need to continuously update the chart as ...

Why is it that comparing the childNodes of two identical nodes results in false, while comparing their innerHTML yields true?

Currently, I am in the process of developing a simple function in Node.js that compares two DOMs. My goal is to not only identify any differences between them but also pinpoint the exact variance. Interestingly, upon reconstructing identical DOMs using jsd ...

What is the best way to eliminate additional values depending on the one I have chosen?

When utilizing the Vuetify v-autocomplete component with the multiple prop, we are able to select multiple values. How can I deselect other values based on the value I have selected? For instance: If I choose the main value, all others will be deselecte ...