"Exploring the world of AngularJS and the art of TypeScript

I am facing an issue with broadcasting an array of albums to another controller. In the structure of my controllers, I have a parent controller called multimediaController and a child controller named multimediaAlbumController. Although I am sending a variable, I cannot seem to receive it for some unknown reason.

multimediaController.ts

export class MultimediaController {
   $scope;
   static $inject = ['$scope'];
   constructor($scope){
     this.$scope = $scope;
   }
   changeAlbum(){
       this.$scope.$broadcast('prod', console.log("sending") );
   }
}

multimediaAlbumController.ts

export class MultimediaAlbumController{
   $scope;
   static $inject = ['$scope'];
   constructor($scope){ 
      this.$scope = $scope;
   }
   brodRec(){
     this.$scope.$on('prod', () => {
            console.log("receiving");
        });
   }
}

Even though in the console I see "sending" being logged, I am unable to get the message "receiving". What could be the mistake that I am making?

Answer №1

Ensure that the $scope variable is accessible from outside.

constructor(public z:ng<IScope>) {
 this.$z = z;
}

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

AngularJS: Show the value of a key in a textarea when hovering over it

My AngularJS code includes a dictionary, structured like this: $scope.examples = [ {name: 'Key 1', value: "1"}, {name: 'Key 2', value: "2"}, {name: 'Key 3', value: "3"} ]; To display all three keys in the documen ...

Error: Unable to assign values to undefined properties (specifically 'styles') when using withLess, withSass, or withCSS in next.config.js within Next.js

I have been attempting to set up a NextJS 12 project with custom Ant Design. Following some examples I found, it seems I need to configure my next.config.js file with the libraries @zeit/next-sass, @zeit/next-less, and @zeit/next-css. However, when I try t ...

Tips on utilizing React and Node to upload text as a file to Google Drive

Are you wondering how to incorporate React.js as the frontend and Node.js as the backend for uploading/reading files from Google Drive? In my attempts, I've tried writing a string as a text file and then uploading it to Google Drive by following this ...

Performing an Ajax request to submit a form without the need to reload the page in MVC

I am looking for assistance with submitting a form from an MVC view without refreshing the page. However, it seems that my AJAX code below is not functioning properly: //here is ajax call function AjaxCallAndShowMessage(btnClick) { $('form').s ...

The fuse box was to blame for triggering a GET request to http://localhost:4444/, resulting in the error message

I encountered an issue with fuse-box and P5.js where I received a GET http://localhost:4444/ net::ERR_CONNECTION_REFUSED. The complete code can be accessed on GitHub. The fuse.js file contains the following configuration: const { FuseBox, WebIndexPlugin ...

Updating website content dynamically using AJAX and URL manipulation without refreshing the page (Node.js)

How can I update the inventory without refreshing the page using both button events and URLs? I want to be able to update to a specific page based on the URL parameter (like /inventory/2) when it is passed to the route. Currently, my AJAX request works but ...

Combining two items from separate arrays

How can I efficiently merge objects that share the same index in two different arrays of objects? Below is the first array const countries = [ { "name": "Sweden", "nativeName": "Sverige" }, ...

Issue with AngularJS templates failing to hide a div while navigating between routes

My user registration process consists of two pages; the second page may vary depending on the role, but the first page remains constant. I want users to be able to navigate forward and backward on both screens with persistent data. I am attempting to use a ...

Travel to the state of grandparents using ui-router

Using ui-router, I've discovered that I can navigate to a parent state by using $state.go('^') without specifying the full path. However, is there a similar way to go to the grandparent state if my parent state is abstract? While looking at ...

Using Angular's ng-switch directive within a select dropdown option

Can we implement the [Data Presentation Format] to be utilized in the [Dropdown Box]? Specifically, I would like the "parent" items to appear as is within the dropdown, while the "child" items should have a [tab] indentation to denote their relationship wi ...

Embrace positive practices when working with nodejs

What is the best way to enhance the readability of my code by replacing the extensive use of if and else if statements when detecting different file extensions? Currently, I have over 30 else ifs in my actual code which makes it look cluttered. // Retrie ...

Angular Directive may encounter compatibility issues in Internet Explorer

My journey into learning AngularJS has led me to successfully create a web application using Google Charts and Angular. Everything was running smoothly in Firefox and Chrome until I decided to test it in Internet Explorer (IE) and discovered that my projec ...

Syntax Error: The function `loadReposFromCache(...).error` is not defined in this building

I'm currently attempting to utilize the SyntaxHighlighter v4 plugin, but I'm facing issues with the build process! While following the guidelines provided here, an error popped up: $ ./node_modules/gulp/bin/gulp.js setup-project [10:12:20] Requ ...

Using Angular to create a web API routing system with the PUT method

I'm encountering an issue with routing in my Angular app + web API. I am trying to update a user, but it's not working as expected. The server is returning a 404 error: Failed to load resource: the server responded with a status of 404 (Not Fo ...

How to dynamically add a form to your website

Looking to dynamically insert a form on a page based on the value selected from a datalist, all without having to reload the entire page. <form action='#' method='get'> <input list="category" name="category"> <da ...

Tips for adding multiple elements to the DOM at once

Is it possible to efficiently append elements to the DOM all at once? In the code snippet below, I am adding elements to a root element (tr_next) within a loop. $('.abc').each(function(){ //create element code here var tr_next = $("<tr> ...

Utilize a different variable for the display without altering the original model

Within my object, there resides a collection of items labeled X. Each X contains a list of Y items, and each Y contains a list of Z items. I am seeking a solution to hide the span upon clicking a button without altering the object itself. One approach inv ...

Unresponsive jQuery Ajax JSON Request

I am working with a basic Ajax function: insertInto = function(){ console.log("Hello "); var power = $("#power").val(); var vehicle = $("#vehicle").val(); var sendData = { "power": power, "vehicle": vehicle }; $.ajax({ type: ...

Angular.js guarantees fetching data with $http.get

I encountered an issue with my service that makes an $HTTP.GET request. Initially, I tried to access the object $$state but found that the value inside was undefined. To resolve this, I delved into learning about promises and asynchronous calls by reading ...

Dealing with numerous dynamically generated tables while incorporating sorting in Angular: a comprehensive guide

I am faced with a challenge involving multiple dynamically created Angular tables, each containing the same columns but different data. The issue at hand is sorting the columns in each table separately. At present, I have two tables set up. On clicking the ...