Why does ng-bind fail to display values from rootScope that have been set by using ng-click?

I am trying to save a variable within $rootScope. When I have the following structure, everything works fine and the second div displays the value:

<html ng-app>
  ...
  <body>
    <button ng-click="$rootScope.pr = !$rootScope.pr"></button>
    <div ng-class="{some:$rootScope.pr}">{{$rootScope.pr}}</div>
  </body>

However, when my structure looks like this:

<body>
    <div class="root-scope-value-1">{{$rootScope.mobileMenuCollapsed}}</div>
    <div class="content-wrapper" ng-controller="MainController">
        <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <div class="root-scope-value-2">{{$rootScope.mobileMenuCollapsed}}</div>
                    <button ng-click="$rootScope.mobileMenuCollapsed = !$rootScope.mobileMenuCollapsed">

The div with class root-scope-value-2 correctly shows the value from $rootScope.mobileMenuCollapsed, but the div with class root-scope-value-1 higher up in the DOM does not. Why is that?

javascriptangularjsangularjs-scope

Answer №1

It is not necessary to utilize the $rootScope in the view; scopes are automatically linked to the views (even when using the controller As syntax, where the alias becomes a property on the $scope that holds the value of the controller instance reference). All scopes ($scope.$new()) other than isolated scope ($scope.$new(true)) are ultimately inherited from the rootScope, so any properties available on the rootScope will be automatically accessible on the scope. Therefore, in this case, your controller's MainController scope inherits from the rootScope.

Plnkr

As a best practice, always store properties on an object within the rootScope (as shown in the plunker), so any changes made to these properties (properties of an object in the rootScope) from the child scope will also reflect on the parent scope since they both point to the same reference.

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

Why does console.log in JavaScript exhibit different behaviors as evidenced by the code?

Exploring the behavior of console.log(obj) compared to console.log("obj"+"\n"+obj) in the code snippet below reveals two distinct output outcomes. const obj = new Object() obj.first = 'John' obj.last = 'Doe' obj.alive = true ob ...

javascriptnode.jsecmascript-6

Issues encountered with AngularJS directive binding inner content not functioning as expected

I am currently developing a feature toggle directive, which requires a check to be performed in order to display content if the check is successful. I want the directive to replace itself with its content without creating a new child scope (so I'm try ...

javascriptangularjsangularjs-directive

Transform PHP array into a JavaScript array

Currently, I am using Laravel and retrieving a list of values from a database with the following code: $idordenes = DB::table('ordenes')->select('id')->get(); Upon echoing the idordenes variable, the output is as follows: [{"fa ...

javascriptphparrayshtmlweb

Vue Component Update DisorderI hope this meets your expectations

Below is my code using Bootstrap, Vue, and Axios: SETUP: *Please disregard the tab-contents in component_a main.js Vue.component('component_a', { props: ['info'], template: `<div> // Component A template code here } ...

javascriptvue.jsaxios

Ways to retrieve the most recent state in a second useEffect call?

Currently, I am encountering a situation where I have implemented two useEffect hooks in a single component due to the presence of two different sets of dependencies. My challenge lies in the fact that even though I update a state within the first useEffec ...

javascriptreactjsreact-hooks

Mastering Anchors in AngularStrap ScrollSpy

Is there a way to effectively utilize AngularStrap's ScrollSpy feature to link to anchors within the same document? Upon reviewing the AngularStrap documentation, I noticed that when a link is clicked, a double hash is generated in the URL. For examp ...

javascriptangularjsangular-strap

Next.js API Endpoint Call Resulting in Empty Object Returned by Fetch Function

Having an issue with making an API call in Next.js to delete an item from the database. I'm using the "body" field of the fetch to send a string to the API. The fetch call is within a Next.JS page, and the API endpoint is located in the API folder gen ...

javascriptnode.jsreactjsnext.jsfetch-api

Is Angular 2+ responsible for loading the entire module or only the exported components within it?

I'm dealing with a situation where I have a large module but only need to export one specific component. I'm wondering if Angular loads the entire module or just the exported components, as I want to optimize performance without compromising the ...

javascriptangulartypescript

Guide to inserting a glyphicon within a bootstrap badge

I've been working on a unique way to display hierarchical data using bootstrap badges and AngularJS. My goal is to create a user-friendly experience where people can easily navigate through categories. There are 3 main types of categories: parent: T ...

cssangularjstwitter-bootstrap

Struggling to understand the usage of FormData and ngResource

I am currently facing an issue while trying to upload a file as MIME/multipart through AngularJS 1.6.4 and then sending it to an ASP.Net WebAPI. I came across a sample project that uses version 1.3.1, where the following code snippet works: var formData ...

angularjsngresource

Tips for accessing payment details from a stripe paymentElement component in a React application

Here is a basic code snippet for setting up recurring payments in Stripe: await stripe ?.confirmSetup({ elements, confirmParams: { return_url: url, }, }) After browsing through the documentation and the internet, I have two unanswere ...

javascriptnode.jsreactjsstripe-payments

How can I utilize npm with the original source code instead of minified or bundled code?

I am looking to access npm and JavaScript (or TypeScript) 3rd party libraries directly from the source code. Similar to how I can make changes in Python libraries by going into their source code, I want to have the same capability with my JavaScript depen ...

javascriptnode.jstypescriptnpm

Executing a secondary API based on the data received from the initial API call

Currently, I am diving into the world of RxJS. In my project, I am dealing with 2 different APIs where I need to fetch data from the first API and then make a call to the second API based on that data. Originally, I implemented this logic using the subscri ...

javascriptangulartypescriptrxjs

Utilize the Math.log() function within an HTML document

I am attempting to incorporate a Math operation in an HTML page, but unfortunately it is not functioning as expected. Here is the code snippet that I have experimented with. Is there any solution to make this code operational? HTML code <div> < ...

htmlangularjs

View content from an external file within an iframe

My goal is to showcase a text file within an iframe that updates automatically every second. To achieve this, I have created a simple function: function refresh() { $("#derek").attr('src', $("#derek").attr('src')); }; The automati ...

javascriptphpjqueryhtmliframe

Is it possible to retrieve several columns using the pluck method in Underscore.js following the input from the where method, similar to LINQ

var persons = [ {name : "Alice", location : "paris", amount : 5}, {name : "Bob", location : "tokyo", amount : 3}, {name : "Eve", location : "london", amount : 10} ]; var filteredResults=_.pluck(_.where(persons, {location : "paris"}), 'nam ...

javascriptunderscore.js

Error: In Nodejs Promises, you cannot invoke the "then" method on an undefined value

Could you clarify what's incorrect about the following code snippet? var promise = fs.readFile(file); var promise2 = promise.then(function(data){ var base64 = new Buffer(data, 'binary').toString('base64'); res.e ...

javascriptnode.jsfilecallbackpromise

Transforming a Python list into a JavaScript array

Hey there, I'm in the process of creating a JavaScript array of dates to input into a jQuery datepicker addon. Here is my Django view: def autofill_featured(request): show_id = request.GET.get('show_id') show = Show.objects.get(id=s ...

javascriptjquerypythondjangojson

Breaking Down URLs with JavaScript

I am looking to extract specific portions of a URL and here is my progress so far. <script type='text/javascript'> var query = window.location.pathname.split( '/' ); query = window.location.pathname.split( '.html' ); v ...

javascriptarrayssplit

Using jQuery to show and hide elements on a webpage

One issue I'm facing is changing the content on a page depending on the clicked link. The problem arises when the displayed content for one link persists even after clicking another link, despite setting it to not display when another link is clicked. ...

javascriptjqueryhtmlcss