Angular vs. Typescript: What gets assigned to the $scope variable?

As I work on integrating trNgGrid into my angular app, the challenge arises when attempting to bind a function from the controller to an ng-click on a row. This difficulty stems from the fact that the table body is built by itself. The solution proposed in the documentation suggests using $watch on an array within the $scope for tracking changes. While I understand the concept of $scope, it's not often necessary to utilize it when working with TypeScript and the ControllerAs syntax. So, my inquiry is: what exactly gets stored on the $scope and how do I properly monitor it?

In the given example:

export class DummyViewModel {

    private iAmPrivate : number;
    public iAmPublic: number;

    constructor($scope : any) {
        $scope.amIOnTheScope = "??";
    }
}

Are iAmPrivate and iAmPublic present on the $scope? Can I keep an eye on changes to iAmPublic using $scope.$watch("iAmPublic",...? Moreover, if I access a public member of the controller from the view using vm.iAmPublic, where does this link back to? Does it connect to the $scope or some hidden realm of the controller?

Answer №1

How can I effectively monitor and access data on the $scope?

If you define your view model as DummyViewModel as vm, then accessing it through $scope.vm will give you an instance of DummyViewModel.

To keep track of changes in the scope, you can simply use the following syntax:

$scope.$watch(()=>this.someMember,(val)=>{
     // Utilize the updated value
});

Additionally, there is a third boolean parameter for deep watching, and you can also explore $scope.$watchCollection for more options.

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

Nested ng-repeats within ng-repeats

I have a question regarding the correct way to utilize an inner ng-repeat inside of an outer ng-repeat: Essentially, I am looking to implement something along these lines: <tr ng-repeat="milestone in order.milestones"> <td>{{mi ...

Using Firebase onDisconnect with React Native

I am currently working on a React Native app and I am facing an issue where I need to update the user status to 'offline' in Firebase when the user closes the app. Here is what I have tried: import React, { Component } from 'react' ...

Issues with hover functionality in Javascript, CSS, and HTML

Seeking assistance with my JavaScript, HTML, and CSS development, I ran into an issue while trying to create a hovering function for my webpage. Despite my efforts, the links are not displaying anything when hovered over, and the divs meant for specific ho ...

Conceal the menu on jQuery click event anywhere on the page

There is a button on my interface that, when clicked, opens a menu. The button appears blue when selected and the menu opens, but when a menu item is chosen, the menu closes and the button returns to its original state. However, my problem arises when I ...

Tips for turning off hash-based redirection in AngularJS

Here is a specific URL: http://www.something.com/sometest/test/#registration Some code has been written based on #registration for Internet Explorer. However, when using AngularJS, it redirects to the following URL, which disrupts the logic: http://www ...

An unusual phenomenon in the controller hierarchy causing issues with accessing the parent scope in AngularJS

Recently delving into the world of angularjs, I encountered something perplexing that seemed like a glitch in the controller hierarchy when it comes to accessing the parent scope. Here are two code snippets that I believed should both function properly bas ...

Error: The module PosModel is not defined

Recently, I took over the responsibility of working on the models.js file for the point_of_sale module. My task was to add a new model by integrating the following code: openerp.dewieuw = function(instance, local) { //module is instance.point_of_sale var ...

What is the process for reinserting a list item into the nested elements?

Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu ...

Utilizing Angular JS to Manage Controller Events

I am currently working on an application that requires saving a large amount of data in cascade, similar to a typical master-detail view. Within this view, there is a "Save All" Button which saves each row in an iteration. This process triggers jQuery cus ...

Discover and update values in JSON using JavaScript

Currently, I am working on generating graphs using d3.js with a JSON file as the input. My main challenge lies in parsing the date and time format for the x-axis. Below is the code snippet that I have attempted: d3.json('data/fake_users11.json', ...

Setting up Vagrant with Xvfb Troubleshooting

Setting up a vagrant machine with Ubuntu 14.04 to conduct tests using Selenium and Protractor. The goal is to execute all tests on this headless machine without the need for a graphical interface, just plain terminal output. Following these resources for ...

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

Creating a program to automate block placement

I’m attempting to program my MineFlayer bot to automatically position a sand block on the face of a piston whenever it detects one within a five-block radius. Despite my efforts using bot.placeblock(33, vec(0,0,1), cb), I keep encountering an error mess ...

Keyboard input that allows for diagonal movement in games at the same time

Currently, I am developing a 2D game using Node where the character must move diagonally. This game is top-down and text-based, existing solely within a Node environment without traditional browser features like keydown/keyup events. To handle user input, ...

Node.js does not support running Bootstrap and CSS, resulting in style not being applied due to the MIME type ('text/html') not being a supported stylesheet MIME type

I attempted to test out the Start Bootstrap Bare template using Node.js and Express. (Link to Start Bootstrap Template) I opted not to make any alterations to the HTML, CSS, and JavaScript files provided with the template. Instead, I created a new index.j ...

Seamless Axios operations even without internet connection in Vue.js

In my Nativescript Vue.js application, there is a functionality where the user clicks on login, Axios makes a call to an endpoint to fetch a token. However, I noticed that when the emulator phone is offline, the Axios call still goes through and the &apos ...

Ways to resolve sonar problem "Ensure this function is updated or refactored to avoid duplicating the implementation on line xxx"

SonarQube has detected duplicate functions in specific lines: beneficiaires.forEach(beneficiaire => { () => { Below are the identified functions: affectPercentageToBeneficiares(beneficiaires: BeneficiaryData[], sum: number) { let numberOfBenefi ...

Utilizing JQuery for parsing information

I am working on a project that involves displaying Google Maps API on one tab and images on another within a container. The goal is to have the image in the second tab change when a location is selected from the list. To achieve this, I have set up a hidd ...

Vue routing stops working when there is no hash in the URL (no designated input file)

I am facing the need to operate Vue router in its default mode, known as hash mode, and unable to use it in history mode. In this mode, all my dynamic routes have a leading hash, like http://myurl.com/#/highlights. However, removing that initial hash, such ...

Receiving an error when attempting to import a function and access props using the "this" keyword: "TypeError: Unable to retrieve property 'renderElapsedString' as it is undefined"

Just started using React and working on a time tracking app based on the teachings of FullStackReact. Instead of Create Class, I opted for the ES6 'extends' module. However, I've encountered an error that has got me stumped. Error: Unable ...