What is causing my component callback to not function properly?

I'm currently following a tutorial on AngularJS callbacks from . In my code at https://plnkr.co/edit/dxyI0p0pZFZdMalLfvXO?p=preview, I've attempted to showcase the issue I'm encountering. I have initialized the component in three different ways:

<section id="main-content" ng-controller="myPageController as ctrl">
<my-component label="Scope" myChange="cb()"></my-component>
<my-component label="Ctrl" myChange="ctrl.cb()"></my-component>
<my-component label="Page" myChange="page.cb()"></my-component>
</section>

However, none of these methods seem to be working. While I can see the message logged by the function associated with the checkbox in the component, I do not receive the message from the callback, nor do I encounter any errors. What could I be overlooking?

javascriptangularjscallbackcomponents

Answer №2

Check out the Plunker link for reference: https://embed.plnkr.co/OYpLu8/

If you modify your file named myPage.inc to include the following code:

<section id="main-content" ng-controller="myPageController as ctrl">

    <h2>This is the page.</h2>
    <my-component label="Scope"  ng-model="confirmed" ng-change="cb()"></my-component>
    <my-component label="Ctrl"  ng-model="confirmed" ng-change="ctrl.cb()"></my-component>
    <my-component label="Page"  ng-model="confirmed" ng-change="page.cb()"></my-component>

</section>

This change specifically addresses the issue with ng-change.

The ng-model directives are redundant as the model named confirmed is not defined in any controller. It is included solely for the functionality of ng-change.

Update: To make an outside function get executed, you must pass the function into the directive by creating a custom scope.

'scope': {
  'yourFunction': '&'
}

Then, invoke this function within your component.

<label>{{vm.label}}</label>

<input type="checkbox" ng-click="vm.handleCheckboxClick()" ng-model="confirmed" ng-change="yourFunction()"/><br>

From now on, whenever you need to call an external function, remember to pass that function to your component.

<my-component label="Scope" your-function="cb()"></my-component>
<my-component label="Ctrl"  your-function="ctrl.cb()"></my-component>

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

Proper method for incorporating client-side libraries (such as adminLTE) into Vue.js 2.0

Looking to merge adminLTE with vue. I've set up a fresh app using vue create admin-cli Next, I ran npm install admin-lte --save following the instructions in this link: Now npm is storing everything under node_modules/admin-lte I'm not quite ...

javascriptvue.jsvuejs2adminlte

Angular - The connections between deeply nested object models are established

I have an Angular application that is used to display company and contact person information in a text box format. Here is the code for displaying the Company Email address: <label> Company Email address</label> <input type="text& ...

javascripthtmlcssangularangular2-ngmodel

Storing dynamically loaded images through PHP, AJAX, JSON, and jQuery for faster retrieval

I will provide as much detail as I can here. The application I am currently developing allows administrators to create folders and upload photos into them. The display is similar to Pinterest, where all the photos are loaded in a collage on one screen. It ...

phpjavascriptjqueryjsoncaching

Testing reactive streams with marble diagrams and functions

Upon returning an object from the Observable, one of its properties is a function. Even after assigning an empty function and emitting the object, the expectation using toBeObservable fails due to a non-deep match. For testing purposes, I am utilizing r ...

javascripttypescriptjestjsrxjs-marbles

Downloading multiple files on both iOS and Android devices

Is there a way to download assets (mp3/jpeg) in an Asynchronous manner? I have over 200 files in each case and the process is taking too long. Are there any techniques to speed up the download process on both iOS and Android? ...

javascriptandroidiosobjective-ccordova

Switch between active tabs (Typescript)

I am working with an array of tabs and here is the code snippet: const navTabs: ITab[] = [ { Name: allTab, Icon: 'gs-all', Selected: true }, { Name: sources.corporateResources, Icon: 'gs-resources', Selected: false }, { Name ...

javascriptangulartypescript

Looking for a list of events in Express.js?

I've been searching through the official documentation, but I couldn't find a list of events for express. Does anyone know if there's something like 'route-matched' so that I can use app.on('route-matched', () => {})? ...

javascriptnode.jsexpress

Using Backbone.js to Persist Information on the Server

Currently, I'm in the process of integrating my Backbone.js application with the server. One thing to mention is that I have customized my sync function in the collection to utilize jsonp: window.Project = Backbone.Model.extend({ initialize:func ...

javascriptjqueryajaxbackbone.js

What distinguishes submitting a form from within the form versus outside of it?

When the code below, you will see that when you click btnInner, it will alert 'submit', but clicking btnOuter does not trigger an alert. However, if you then click btnInner again, it will alert twice. Now, if you refresh the page: If you first ...

javascriptjqueryhtmlforms

AngularJS is causing issues with the JSON formatting when trying to send data to the server using the POST

My issue involves a Nodejs express server and an angularJS client that sends data to the server. The problem arises when attempting to send JSON to the server using angularJS, as the received JSON format appears distorted like so: {"{\"question&bsol ...

angularjsjsonnode.jsexpress

What steps should I follow to enable my bot to generate or duplicate a new voice channel?

I needed my bot to either create a new voice server or clone an existing one. The variable "voic" contains the ID of the voice channel. voic.voiceChannel.clone(undefined, true, false, 'Needed a clone') // example from ...

javascriptnode.jsdiscorddiscord.js

what are some advanced techniques for manipulating the DOM with a datatable?

I am currently involved in a project where we are presenting the data summary for each year to the user. The summary includes the total data for each year (counted rows). View Data Summary: Click here When the user clicks on the "+" icon, they will be ab ...

javascriptjqueryajaxdomdatatable

Is it possible to use a single function to both set the state and return JSX?

I'm currently grappling with creating a function that, when called, will update the state to an object {item: 'whatever the user types', list: [...list, todo]}. The challenge I'm facing is figuring out how to update the state and return ...

javascripthtmlreactjsreact-hooksuse-state

What is the method to determine the inviter on Discord.js?

Hi there! I'm currently working on an Invite Logger and could use some assistance. I'm having trouble figuring out how to identify the user who invited another user. client.on('guildMemberAdd', async (member) => { const channel = ...

javascriptnode.jsnpmdiscorddiscord.js

Ways to classify the prop type of a functional component by specifying the different types of props for the FC

I have created two functional components that require different prop types. export interface OrderImageProps { orders: ICartItem[] } const OrderImage: React.FC<OrderImageProps> = (props: OrderImageProps) => { return ( <div> ...

javascriptreactjstypescriptreact-props

It is impossible to alter the data contained within the input box

Objective: Upon clicking a button to display the modal, the selected data (first and last name) should be inserted into an input box and editable. The user should be able to modify the data. Issue: The data entered into the input box cannot be edited ...

javascriptreactjs

Generate HTML tags dynamically within a JSON document using PHP

Is there a way to incorporate HTML markups (generated dynamically by a CMS) into a JSON file? I am aware that in the html string, one must escape double quotes by adding "" as shown below. { "title": "Title", "da ...

javascriptphphtmljson

Tips for changing date format within Ajax javascript code

I am working with a JavaScript AJAX code: success:function(res){ var _html=''; var json_data=$.parseJSON(res.posts); $.each(json_data,function (index,data) { _html+='<span class=&apo ...

javascriptjsonajax

Executing a jQuery AJAX request for a second time

Upon hitting the submit button for the first time, the codes work successfully. However, upon hitting the button for the second time with correct email and password values, nothing happens and the user cannot log in. I have identified that the issue lies w ...

javascriptphpjqueryajax

CSS media query to target specific viewport width

In my JavaScript code, I am dynamically creating a meta viewport. I set the value of this viewport to be 980px using the following script: var customViewPort=document.createElement('meta'); customViewPort.id="viewport"; customViewPort.name = "vie ...

javascripthtmlcss