"Encountering an issue where ng-repeat doesn't reflect updates after adding a new value to the array. Attempted to use $scope.$

Whenever the chat is opened and a name is clicked, it triggers $scope.openChat(user) which adds a name to the $scope.chat.openChats array. The ng-repeat is supposed to monitor this array for any new values but does not update. I attempted using $scope.$apply() after pushing the value to the array, but encountered this error

Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.14/$rootScope/inprog?p0=%24apply

Any assistance is appreciated! Here's my codepen.

HTML

<div ng-app="MyApp" ng-controller="AppCtrl">
  <div id="menubar">
    <div class="logo"><a href="#"><img src="http://i.imgur.com/yS9Ug9Z.png"/></a></div>
    <ul class="middle">
      <div class="r1">Project Name <i class="glyphicon glyphicon-pencil"></i></div>
      <ul class="r2">
        <li class="dropdown">
          <button href="#" data-toggle="dropdown" class="dropdown-btn">File</button>
          <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <button href="#" data-toggle="dropdown" class="dropdown-btn">Edit</button>
          <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <button href="#" data-toggle="dropdown" class="dropdown-btn">Help</button>
          <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
          </ul>
        </li>
      </ul>
    </ul>
    <div class="menu-btns">
      <button id="comment-btn"><i class="material-icons">assignment</i> <span>Comment</span></button>
      <button id="share-btn"><i class="material-icons">supervisor_account</i> <span>Share</span></button>
      <button id="chat-btn" ng-click="openChatDialog()"><i class="material-icons">chat</i> <span>Chat</span></button>
    </div>
    <button id="user-btn"></button>
    <div id="user-drop" class="shadow-1">
      <ul>
        <li>Smile</li>
        <li>You</li>
        <li>Goodlookin</li>
        <li>Get Shwify</li>
        <li>Cellar Door Is Beautiful</li>
        <hr/>
        <li>Your Profile</li>
        <ul class="links">
          <li>Link1</li>
          <li>Link2</li>
          <li>Link3</li>
        </ul>
      </ul>
    </div>
  </div>
  <div id="chat-cntnr">
    <div ng-repeat="chat in chat.openChats track by $index" class="chat-box"></div>
  </div>
</div>

JS

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog) {

  //CHAT
  $scope.chat = {};
  $scope.chat.openChats = [];
  $scope.collaborators = ['Dan', 'Miles', 'Ryan', 'kevin'];

  var chatCntnr = document.getElementById('chat-cntnr');

  // open a chat box
  var isChatOpen = function(user) {
    if ($scope.chat.openChats.indexOf(user) < 0) return false;
    else return true;
  };

  $scope.openChat = function(user) {
    if (!isChatOpen(user)) {
      if (chatCntnr.style.display !== 'flex') {
        chatCntnr.style.display = 'flex';
      }
      $scope.chat.openChats.push(user);
      $scope.$apply();
    }
  };

  // CHAT DIALOG
  $scope.openChatDialog = function() {
    $mdDialog.show({
      controller: 'AppCtrl',
      template: '<md-button ng-click="openChat(\'everybody\')">Everybody</md-button><md-button ng-repeat="user in collaborators" ng-click="openChat(user)"><svg class="status-light" height="17" width="17"><circle cx="8" cy="8" r="8" fill="lightGreen" /></svg>{{user}}</md-button>',
      hasBackdrop: false,
      clickOutsideToClose: true,
      openFrom: '#chat-btn',
      closeTo: '#chat-btn'
    })
  };
});
// chat dialog
// chat

/**
 * MENUBAR
 */
var dropdownBtns = document.querySelectorAll('.middle .dropdown-btn');
var dropdowns = document.querySelectorAll('.middle .dropdown');
var userBtn = document.getElementById('user-btn');
var userDrop = document.getElementById('user-drop');

document.addEventListener('click', (e) => {
  if (userDrop.classList.contains('open')) {
    userDrop.classList.toggle('open');
  }
});

userBtn.addEventListener('click', (e) => {
  userDrop.classList.toggle('open');
  e.stopPropagation();
})

for (var i = 0; i < dropdownBtns.length; i++) {
  (function() {
    var dropdownBtn = dropdownBtns[i];
    var k = i;
    dropdownBtn.addEventListener('mouseover', () => {
      var x = isDropOpen();
      if (x > -1 && x !== k) {
        dropdowns[x].classList.toggle('open');
        dropdowns[k].classList.toggle('open');
      }
    })
  })();
}

var isDropOpen = () => {
  for (var i = 0; i < dropdowns.length; i++) {
    var dropdownClasses = dropdowns[i].classList;
    if (dropdownClasses.contains('open')) return i;
  }
  return -1;
}

/**
 * menubar
 */

CSS

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
html ul, body ul {
  padding: 0;
  margin: 0;
}

#menubar {
  font-family: sans-serif;
  background-color: black;
  display: flex;
  position: relative;
  white-space: nowrap;
}
#menubar .logo {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: lightGrey;
}
#menubar .logo img {
  height: 40px;
}
#menubar .middle {
  padding: 10px;
  padding-top: 8px;
  padding-bottom: 0px;
  color: white;
  width: 100%;
  position: relative;
  font-family: inherit;
  margin-left: 8px;
  margin-right: 20px;
}
#menubar .middle .r1 {
  font-size: 20px;
}
#menubar .middle .r1 i {
  position: relative;
  top: -1px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 2px;
  cursor: pointer;
}
#menubar .middle .r1 i:hover {
  color: lightGrey;
}
#menubar .middle .r2 {
  margin-top: 2px;
  margin-left: -6px;
  font-size: 15px;
  padding-bottom: 6px;
}
#menubar .middle .r2 li {
  display: inline-block;
}
#menubar .middle .dropdown-btn {
  position: relative;
  outline: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  z-index: 100;
  margin: 0 1px;
  margin-top: 1px;
}
#menubar .middle .dropdown-btn:hover {
  background-color: grey;
}
#menubar .middle .open .dropdown-btn {
  background-color: black;
  margin: 0 !important;
  border: white 1px solid;
  border-bottom: none;
}
#menubar .middle .dropdown-menu {
  background-color: black;
  border: white 1px solid;
  border-radius: 0;
  margin-top: -1px;
  z-index: 10;
}
#menubar .middle .dropdown-menu li {
  display: block;
}
#menubar .middle .dropdown-menu a {
  color: white;
}
#menubar .middle .dropdown-menu a:hover {
  background-color: dodgerBlue;
}
#menubar .menu-btns {
  display: flex;
  margin: 12px;
  margin-right: 0px;
  color: white;
  right: 0;
}
#menubar .menu-btns button {
  outline: 0;
  position: relative;
  background-color: transparent;
  border-radius: 2px;
  border: #343436 3px solid;
  margin: 0 5px;
  padding: 2px 12px;
  font-size: 15px;
  white-space: nowrap;
}
#menubar .menu-btns button:hover {
  background-color: #4d4d50;
}
#menubar .menu-btns button i {
  position: relative;
  top: 5px;
  color: #aeaeae;
}
#menubar .menu-btns button span {
  position: relative;
  top: -3px;
}

#user-btn {
  margin: 10px;
  margin-bottom: 8px;
  outline: 0;
  width: 70px;
  background: url("https://www.fillmurray.com/70/92");
  border: none;
  border-radius: 2px;
}

#chat-btn {
  background-color: #343436 !important;
}
#chat-btn:hover {
  background-color: #4d4d50 !important;
}

.shadow-1 {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.2s ease-in-out;
}

#user-drop {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
}
#user-drop ul {
  list-style-type: none;
  padding: 6px 0;
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 500;
}
#user-drop ul li {
  cursor: pointer;
  padding: 4px 16px;
  padding-right: 38px;
}
#user-drop ul li:hover {
  background-color: #e7e7e7;
}
#user-drop ul hr {
  margin: 8px 0;
  border-top: black 1px solid;
}
#user-drop ul .links {
  padding-top: 0;
}
#user-drop ul .links li {
  display: inline-block;
  padding-right: 2px;
  font-size: 11px;
  color: darkGrey;
}
#user-drop ul .links li:hover {
  background-color: white;
  color: black;
}

#user-drop.open {
  display: initial;
}

md-dialog {
  position: absolute;
  right: 25px;
  top: 80px;
}
md-dialog svg {
  position: absolute;
  left: 16px;
  top: 11px;
}

#chat-cntnr {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
}
#chat-cntnr .chat-box {
  height: 250px;
  width: 200px;
  background-color: blue;
  border: 1px solid black;
  margin: 0 4px;
}
#chat-cntnr .chat-box:last-child {
  margin-right: 0;
}
javascriptarraysangularjs

Answer №1

The issue arises from the fact that when using $mdDialog, an additional isolated scope is created. To utilize your existing scope, you must invoke it in the following manner:

$mdDialog.show({      
  scope: $scope,
  controller: 'AppCtrl',
...

For more details, refer to this post.

Additionally, it is imperative to eliminate $scope.$apply(): this method should only be called when modifications occur outside of Angular (such as in a setTimeout() function).

Why is linking the scope necessary?

In brief: because according to the documentation of $mdDialog found here

The dialog always operates within an isolated scope.

Expanding on this: $mdDialog functions essentially by adding a directive onto the webpage

The template for the dialog must include an enclosing < md-dialog > element

By default, directives can be inserted multiple times throughout a page, resulting in each instance possessing its own isolated scope (as explicited in the Angular documentation on directives). However, if necessary, you have the option to connect your current scope with a directive.

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 characteristics using DocumentTraversal

My goal is to list out the attributes of elements using DocumentTraversal specifically for IE11. While I have been successful in enumerating element attributes, I am facing an issue when trying to do the same with attributes. The enumeration stops at the f ...

javascripthtmldocumenttraversal

Unable to display Apexcharts bar chart in Vue.js application

Struggling to incorporate Apexcharts into my Vue.js site, but unfortunately, the chart isn't appearing as expected. -For more guidance on Apexcharts, check out their documentation Here HTML <div class="section sec2"> <div id="chart" ...

javascriptvue.jschartsapexcharts

What is the best way to execute a sequence of consecutive actions in a protractor test?

To achieve logging in, verifying, and logging out with multiple users, I decided to use a loop. I came across a helpful post that suggested forcing synchronous execution. You can find it here. Below are the scripts I implemented: it('instructor se ...

javascriptseleniumasynchronouscallbackprotractor

React-modal triggers the file-explorer upon exiting the dropzone

Within my project, I have implemented a button that triggers a modal to appear on mouse-over. This button is nested inside a dropzone element. https://i.sstatic.net/95dxy.png The issue arises when I exit the modal by clicking (not exiting with the escape ...

javascriptreactjs

Leveraging Angular templates to enhance the detail template for Kendo UI Grid

I'm currently working with the Kendo UI package for Angular JS and I have a specific question regarding using an Angular template for row details. I am looking to achieve something similar to what is demonstrated in this example: Kendo Grid Detail Te ...

angularjskendo-uikendo-grid

What is the process for redirecting an API response to Next.js 13?

Previously, I successfully piped the response of another API call to a Next.js API response like this: export default async function (req, res) { // prevent same site/ obfuscate original API // some logic here fetch(req.body.url).then(r => ...

javascripttypescriptnext.jsfetch-apinext.js13

What is the most effective way to assign multiple functions to the onClick event of a button, based on a specific property,

I have a special button that generates a specific type of code when rendered: <button>{this.props.text}</button> This button is named ButtonCustom. In the render method of the main container, I am trying to achieve the following: function my ...

javascripthtmlreactjs

Having trouble converting a timestamp to a date in JavaScript

My database uses MongoDB and has a timestamp field with unique formats, such as: 1657479170.7300725 1657479170.7301126 1657479170.7301197 1657479170.9120467 1657479170.932398 Converting these timestamps to the date format YYYY-MM-DD yields the correct res ...

javascriptmongodbdatetimestamp

Utilizing Dropwizard for hosting static HTML files

I'm in the process of developing an application using dropwizard and angularjs. I have configured my AssetsBundle as follows: bootstrap.addBundle(new AssetsBundle("/assets", "/", "index.html")); The challenge I am facing is that I want multiple page ...

javaangularjsdropwizard

The absence of the object's shadow is conspicuously noticeable - three.js

View Screenshot Hey there! I recently exported a 3D model tree from Blender and everything seemed to have gone smoothly, but I encountered an issue. The shadow appears on the trunk and branches, however, it is not reflecting properly. Could this be due to ...

javascriptthree.jsblender

Convenient Method for Making POST Requests with the Node Request Module and Callback

Does the .post() convenience method in Javascript/Node's request module accept a callback? I'm confused why it would be throwing an error like this: var request = require('request'); request.post({url: 'https://identity.api.foo/v ...

javascriptnode.js

Google Maps API now offers the ability to generate directions with up to 500 waypoints

I am facing a challenge with displaying a route on Google Maps using an array of 500 waypoints extracted from a GPS route. Google Maps is unable to create a direction or route with more than 23 waypoints, making it difficult to replicate the original GPS ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3ionic-framework

What is the best way to get rid of trailing numbers in material UI class names?

The standard class for the material ui input box is .MuiInputBase-input, but when I inspect it using developer tools, I see that the same class is displayed as .MuiInputBase-input-619. How can I remove the suffix from the class name? I am currently utili ...

javascriptreactjsmaterial-ui

The construction of the Gatsby site encountered a major obstacle

I've been facing challenges while trying to build my Gatsby site. Whenever I run 'gatsby develop' in the console, my app starts without any issues. However, when I attempt to build it, I encounter errors like the ones shown below. Does anyon ...

javascriptreactjsgatsby

The issue of the selection option not being cleared after being set to 0 persists in JavaScript

I am facing an issue where I need to reset the select option to `0` when another option is selected. I have tried the code below for this purpose. if (varALPO1MobNum == "0") { var selectElement = $(&apo ...

javascripthtml

What is the method to access and examine the attributes of a range in Office.js?

I am encountering an issue while attempting to retrieve the values from cell B2 and create a conditional statement based on those values. Despite my efforts, I continue to receive an error message without any clear understanding of its cause. Please refe ...

javascriptoffice-jsoffice-addins

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

I am facing an issue with returning a value from a function. It seems like a simple task - just looping through my HTMLElements and returning the one I need. This problem is new to me, and I have spent a considerable amount of time debugging the code and ...

javascripttypescript

Adding and removing dynamic fields with Bootstrap functionality

Recently, I've been trying to develop a feature where users can add and remove fields by clicking on a button. However, I've encountered a roadblock in my progress. If you take a look at this CodePen link, you'll see what I have so far. My a ...

javascripthtmltwitter-bootstrap

Is having a server necessary for running an AngularJS application?

As I prepare to deploy my AngularJS app that utilizes RESTful web-services on AWS, the question arises: do I truly need a server to host my AngularJS files? Should I serve them as static files or perhaps utilize something like NodeJS? Is a server necessar ...

angularjsnode.jsamazon-web-services

A web application using JavaScript and Node.js with a focus on creating a REST

After extensive research, I am eager to develop a web application using JavaScript and Node.js with an SQL back-end. However, the abundance of frameworks and tools available has left me feeling overwhelmed. While I have identified some that I would like to ...

javascriptjquerynode.jstwitter-bootstrapweb-applications