The watch function in the scope is not triggered after initialization (ui-router)

Upon visiting a page, I encounter the following code:

<div ng-if='$stateParams.show=="previous"'>
        From
        <input type="text" ng-model="year_from" />
        <br/>
        To
        <input type="text" ng-model="year_to" />
    </div>

In my controller script, I have the following setup:

module.exports = function(){
  $scope.year_from = '2014';
  $scope.$watch( 'year_from', function(v) {
    console.log(v);
    console.log('from');
    $scope.get_previous_reports();
  });
}

However, I notice that the variable v is only defined as 2014 once and the string 'from' is logged once, without the other function being called. What could be causing this issue?

Answer №1

It took me an absurd amount of time to realize that when using ng-if on a div and including ng-models (and possibly other directives), the scope changes within that if statement. What exactly does the scope change to? I have yet to figure that out. The only thing I do know is that I can retrieve my data using $parent.

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

Exploring AngularJS capabilities in showing server validation messages along with creating dynamic forms

On the server side, I am utilizing Express along with sequelizejs. Let's say we have this particular view: (It is included as <div ng-include src="'views/users/_form.html'"></div> in the new, edit view.) <div class="form-gro ...

Using Vue and vue-multiselect to create interactive options based on the selected language

I'm currently developing a Vue website with multilingual support. The chosen language is stored in a Vuex store and accessed through the computed property lang, like so: lang(){ return this.$store.state.lang } I use this lang property in v-if cond ...

Deleting a DOM element within an element that has been created by an external script

On a webpage, I have third-party ad content that is generated by an external script. This content has a delay in loading. My goal is to eliminate a line break from the ad content, but this can only be done once the external script finishes loading and all ...

Menu design with child element creatively integrated into parent element

For my mobile project, I am working on creating a window blind effect menu. The process is quite simple: Clicking on the menu icon moves the bar to the top while the menu drops down Upon selecting an item, the menu smoothly "rolls" up in a window blind s ...

Discover how to extract a whole number (and *exclusively* a whole number) using JavaScript

Is it possible to convert a string to a number in a way that only integers produce a valid result? func('17') = 17; func('17.25') = NaN func(' 17') = NaN func('17test') = NaN func('') = NaN func('1e2& ...

Using Three.js to generate a CSS3DObject containing an HTML iframe from a different origin results in an error

The HTML code snippet below incorporates Three.js for creating a 3D scene and rendering it with CSS. It includes two separate HTML files: index.html and moo.html. <!doctype html> <html lang="en> <body> <script src="js/Three.js">&l ...

How do you modify the up vector of the camera in three.js?

When working with three.js, I encountered a situation where I set the camera's focal point using camera.lookAt(0, 0, 0), but the camera's up vector ended up pointing in a random direction. I have a specific up vector in mind that I want the camer ...

Creating a unique template using Angular directive and ng-repeat

Currently, I am exploring angular 1.2 directives and have created one with a template that includes ng-repeat. However, the variable passed in as a parameter does not appear to be recognized by the directive. Below is the code snippet: Check out the Fiddl ...

Having trouble deciphering the API or a specific one from React.js/Node.js/Axios/Fetch?

I'm facing some confusion regarding my code. I have tried different APIs and some work, while others cannot be accessed in react.js. Can anyone help me correct this issue? The APIs that are not working in react.js always return a typescript fetching f ...

Implement a transition effect for when elements change size using the `.resizable().css` method

I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method. The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating ...

Steps to implement a print modal with JavaScript, jQuery and more

Imagine having a print button on several pages that, when clicked by the user, triggers a modal to pop up with the content for printing. Any suggestions or ideas would be greatly appreciated. I have multiple pages with a print button. When the user clicks ...

From time to time, the web application encounters the error message net::ERR_NAME_NOT_RESOL

Currently, I am working on developing a simple web app card game. The concept is straightforward- users log in and begin playing by selecting three matching cards then hitting submit. When the submit button is clicked, the chosen cards' names are sent ...

Converting PHP code to utilize AJAX in JS

Within the confines of a single file (invasions.php), I have the following code: <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta http-equiv='con ...

Why was $(elem) created?

Can someone help me understand the usage and purpose of $(elem) in JavaScript? I am facing an issue with my JavaScript function where I have three forms on a page, each with fields that can have similar classes. When I try to validate one form, even if it ...

Transfer JSON data between controllers without utilizing Services or Factory in AngularJS during routing

On my Dashboard page, I have an Object. When a user clicks on the Details Page from the Dashboard, it should redirect to the Details page. I am looking to pass the JSON Object from the Dashboard Controller to the Details Controller. Is there a way to do ...

Using Mongoose to Populate an Array with a Referenced Property

In the Post schema, I am using an array of Tags: tags: [ { type: Schema.Types.ObjectId, ref: 'Tag' } ], The Tag schema has the following structure: { name: String } When I populate the tags array, it populates with tag object literals. Is th ...

What is the best way to incorporate markers into my d3 line chart that includes two separate datasets?

In my JavaScript code, I'm creating a line chart for two datasets using the d3 library with Vue framework integration. Within the HTML code, there are buttons that trigger the updateData function to display the line charts for the respective datasets ...

How can you identify the resume of a web application once you return from opening the camera?

I'm working on a web application that utilizes the camera by following steps from this solution: How to access a mobile phone's camera using a web app? However, I am trying to figure out how to implement a callback function once the user return ...

What is the best way to change an image using JavaScript?

Is there a way to change an image when the tag doesn't have an id? <img src="URL_1" /> I need to replace URL_1 with URL_2 Any suggestions on how to do this? ...

Conceal elements within a div using the 'elementFromPoint' function

In my HTML, I have a div that contains an icon and some text. I want to make it so that when I hover over the div with my mouse, only the div itself is visible to the 'elementFromPoint' function. How can I achieve this? Here is an example of th ...