Defining and monitoring changes with $watch in an AngularJS controller

A portion of my webpage is controlled by a specific controller that relies on the global variable $scope.selected. I need to ensure the controller initializes when the page loads and whenever the value of $scope.selected is updated.

.controller ('Details', ['$scope',  function ($scope) {
  function initializeController() {
    $scope.viewProperty = performComplexOperation($scope.selected);
  }
  $scope.$watch ('selected', initializeController);
  initializeController();
}])

<span ng-if="selected.gto" ng-controller="Details">
    {{viewProperty}}
</span>

I'm currently calling the initialization function both during startup and whenever $scope.selected changes. However, the current setup doesn't seem optimal. Is there a more elegant solution available?

Answer №1

In most cases, $watch() is utilized within a directive rather than a controller. It's important to note that init() is only called once during controller initialization, as $watch triggers its listener upon initialization. For further insights on this topic, check out the article "Why You Should Avoid Using $watch in AngularJS Controllers" by Ben Lesh.

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

Transforming JSON data into HTML code

I am looking to transfer a list of songs from a JSON file to specific HTML ids using a jQuery function. In the JSON file, there are five songs, and here are two of them in the same format: { "songs": [ { "title": "Bohemian Rhapsody ...

Utilizing color schemes in your design: a step-by-step guide

Is there a way to utilize the custom color scheme defined in the theme export default createMuiTheme({ palette: { primary: { main: 'red', contrastText: '#ffffff' }, secondary: { main: 'green', ...

Issue with Google Charts where the label does not show outside of the bar if the bar is too small

I am encountering an issue with my Google Bar Chart where the bar label is not displaying outside of the bar when it is too large to fit inside. This behavior should be the default, but my charts are not working as expected. The problem can be seen in rows ...

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

I'm currently developing a group video chat app and I'm facing the challenge of generating distinct shareable links for every chat room created. Can anyone guide me on how to accomplish this? My aim is for users to easily join the chat room when ...

Errors always occur when making POST requests in SAPUI5, leading to a 500 Server Error specifically related to OData

Currently diving into the world of SAPUI5 and OData, I am in the process of creating a basic application that showcases employee data in a table. The objective is to add a new employee to the table whose information will be stored in the SAP backend. Whil ...

Tips for integrating JavaScript code into React JS applications

I am attempting to create a scrollable table that scrolls both horizontally and vertically, using the example provided by . In my project directory under src/components/ScrollExample.js, I have copied and pasted the HTML code. In addition, in src/styles/c ...

Can the Browser Handle Quick Sorting of Enormous XML Data?

Currently, our team is facing a problem due to server restrictions that are beyond our control. We are required to use an XML file and parse it using JavaScript/jQuery instead of utilizing a database for a job. Moreover, we do not have direct write access ...

Building a custom image upload feature for CKEditor 5 in React

Today has been dedicated to trying to integrate CKEditor with React, and I have made significant progress. However, the only issue I am encountering is related to uploading images. I already have a method in place to upload images to my Azure server. All ...

Failure in SystemJS during ahead-of-time compilation due to missing NgZone provider

Previously, I have successfully used Angular's ahead-of-time compilation. However, after adding routing and lazy loading to my app, I am facing difficulties in making it work again. Upon updating my code to the latest 2.0 release, it functions well w ...

Encountered an Unpredictable SyntaxError: Is this a Cross-Domain Problem?

I have been attempting to connect with the Indian Railway API using Ajax in order to retrieve data in JSON format. Below is the code I am using: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleap ...

What is the most effective method for organizing and retrieving information on numerous topics?

Recently, I have been working on a simple chat bot project using JavaScript for the purpose of practice and enjoyment. My intention is to build upon this project and optimize it as I progress. One issue I have encountered is the inefficiency of the search ...

What steps can I take to ensure this conversion meets markup validation requirements?

I keep encountering a validation error that keeps coming up: $("#preview").html('<div align="center"><img src="/ajaximage/loader.gif" alt="Uploading...."/></div>'); The error message states: document type does not allow elemen ...

Can default values be assigned to a DTO during initialization?

What is the method to assign default values when a query is empty? In the case where I have this DTO structure for a query: export class MyQuery { readonly myQueryItem: string; } If the request doesn't include any query, then myQuery.myQueryItem ...

Unexpected behavior: AngularJS data-ng-class failing to apply specified CSS

Here is some Html code, <span style='cursor:pointer' data-ng-class='highlightedText:true'>Dheepan raju</span> Also, some css styling, .highlightedText{ text-decoration: underline; } This may seem like a simple code s ...

Is it possible to use AngularJS promises without callbacks?

Typically, when I want to retrieve data asynchronously, I would use the following approach: var promise = $http.get('/api/v1/movies/avengers'); promise.then( function(payload) { $scope.movieContent = payload; }); This scenario is quite ...

Adapt to screen size changes by transforming a single row into two separate rows

I am trying to create a two-column row with inputs: <div class="row first-row"> <div class="column col-6"> <div class="form-group"> <label for="usr" >Se ...

Ways to access the value of an attribute in an AngularJS object

Is there a way to access the value of field.jobtype within a controller? var app=angular.module('myapp',['ui.bootstrap','ui.select']); app.controller('mycontroller',function($scope){ $scope.onStateSelected = func ...

Is there a way to verify if an element is visible using Puppeteer and only plain JavaScript?

I am looking for a way to verify the visibility of a DOM element using Puppeteer and pure JavaScript, without relying on jQuery. Specifically, I want to ensure that the element is visible based on its CSS properties, rather than being hidden (for example, ...

The behavior of AJAX Search varies between the development and production environments

I recently integrated an instant search feature into my application. During testing on the local server, the functionality met my expectations: It filters the list as I type It is not case-sensitive It allows for resetting the search if I delete the inp ...

Determine the size of a pixel by analyzing its zoom percentage

I am facing a technical challenge that involves coding and math, but my skills are better suited to the former than the latter! My task involves working with a div that is 500 pixels wide and utilizing Jquery. To begin, I will determine the width of the ...