Tips for utilizing Angular 1.x services to refresh one component from another

Question

Tips for utilizing Angular 1.x services to refresh one component from another

I have a main component that contains numerous smaller components within it. The primary goal is to have one component receive input data and display it in another component. The current implementation isn't functioning as expected, additional details on the issue will be provided below:

const app = angular.module('app', []);

app.service('dataService', function() {
  let data = {
    key1: "",
    key2: "",
    key3: {
      key4: 0,
      key5: 0
    }
  }

  this.getKey1 = function() {
    return data.key1;
  }

  this.updateKey1 = function(str) {
     data.key1 = str;
  }
}

app.component('display', {
  controller: displayController,
  template: '<p>{{ keyOne }}</p>'
});

app.component('input', {
  controller: inputController,
  template: '<input ng-model="$ctrl.key1" ng-change="sendKey1()">'
}

function displayController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;
  function onInit() {
    self.keyOne = dataService.getKey1();
  }
}

function inputController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;
  function onInit() {
    self.sendKey1 = function() {
      dataService.updateKey1(vm.key1)
  }
}

The update operation is successful, but the data doesn't get passed to the display component. Even though the data object reflects the correct information after updating, it fails to appear in the view.

javascript angularjs data-binding service components

Answer 1

Answer №1

You are making changes to a string data.key1 = str; within the

let data = {
    key1: "",
    key2: "",
    key3: {
      key4: 0,
      key5: 0
    }
  }

In Angular, only objects can be bound between components, not strings.

Check out this link https://plnkr.co/edit/wfwyyGpcMKOSHGFdg2DS?p=preview

var app = angular.module('plunker', ['ngRoute', 'ngAnimate', 'ngSanitize']);

app.service('dataService', function() {
  let data = {
    key1: "",
    key2: "",
    key3: {
      key4: 0,
      key5: 0
    }
  }

  this.getData = function() {
    return data;
  }

  this.updateKey1 = function(str) {
    data.key1 = str;
  }
});



app.component('inputc', {
  controller: inputController,
  template: '<input ng-model="$ctrl.key1" ng-change="sendKey1()">'
});

app.component('display', {
  controller: displayController,
  template: '<p>{{ data.key1 }}</p>'
});

function displayController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;

  function onInit() {
    self.data = dataService.getData();
  }
}

function inputController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;

  function onInit() {
    self.sendKey1 = function() {
      dataService.updateKey1(vm.key1)
    }
  }
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.6.2/angular.js"></script>
    <!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
    <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
    <script src="https://code.angularjs.org/1.6.2/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.2/angular-animate.js"></script>
    <script src="https://code.angularjs.org/1.6.2/angular-sanitize.js"></script>    
    <script src="app.js"></script>
  </head>

  <body>
    <inputc></inputc>
    <display></display>
  </body>
  
  

</html>

Answer 2

You are making changes to a string data.key1 = str; within the

let data = {
    key1: "",
    key2: "",
    key3: {
      key4: 0,
      key5: 0
    }
  }

In Angular, only objects can be bound between components, not strings.

Check out this link https://plnkr.co/edit/wfwyyGpcMKOSHGFdg2DS?p=preview

var app = angular.module('plunker', ['ngRoute', 'ngAnimate', 'ngSanitize']);

app.service('dataService', function() {
  let data = {
    key1: "",
    key2: "",
    key3: {
      key4: 0,
      key5: 0
    }
  }

  this.getData = function() {
    return data;
  }

  this.updateKey1 = function(str) {
    data.key1 = str;
  }
});



app.component('inputc', {
  controller: inputController,
  template: '<input ng-model="$ctrl.key1" ng-change="sendKey1()">'
});

app.component('display', {
  controller: displayController,
  template: '<p>{{ data.key1 }}</p>'
});

function displayController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;

  function onInit() {
    self.data = dataService.getData();
  }
}

function inputController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;

  function onInit() {
    self.sendKey1 = function() {
      dataService.updateKey1(vm.key1)
    }
  }
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.6.2/angular.js"></script>
    <!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
    <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
    <script src="https://code.angularjs.org/1.6.2/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.2/angular-animate.js"></script>
    <script src="https://code.angularjs.org/1.6.2/angular-sanitize.js"></script>    
    <script src="app.js"></script>
  </head>

  <body>
    <inputc></inputc>
    <display></display>
  </body>
  
  

</html>

Answer 3

Answer №2

Check out this interesting article on A Tale of Frankenstein and Binding to Service Values in Angular.js.

Here is a brief summary of the scenario:

displayController runs
```
self.keyOne = dataService.getKey1()
```
, which sets an empty string to $scope.keyOne.
The expression {{ keyOne }} in the view monitors changes in $scope.keyOne. Initially, it displays "", showing an empty string in the view.
inputController updates dataService.data.keyOne with a new value, like hello world.
The expression {{ keyOne }} once again checks for changes in $scope.keyOne during the digest cycle. Issue: $scope.keyOne remains an empty string! The displayController fails to retrieve the latest value from dataService.data.keyOne.

Thankfully, there is a simple solution. You just need to access the data object directly to accurately evaluate

data.keyOne</code when monitoring changes:</p>

<pre><code>app.service('dataService', function() {
  let data = {
    key1: ""
  }

  //Expose the data object
  this.getData = function() {
    return data;
  }
}

app.component('display', {
  controller: displayController,
  //Evaluate the current value of keyOne in the data object
  template: '<p>{{ data.keyOne }}</p>'
});

function displayController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;
  function onInit() {
    //Get a static reference to the data object.
    //The data object itself shouldn't change, but its properties will.
    self.data = dataService.getData();
  }
}

Answer 4

Check out this interesting article on A Tale of Frankenstein and Binding to Service Values in Angular.js.

Here is a brief summary of the scenario:

displayController runs
```
self.keyOne = dataService.getKey1()
```
, which sets an empty string to $scope.keyOne.
The expression {{ keyOne }} in the view monitors changes in $scope.keyOne. Initially, it displays "", showing an empty string in the view.
inputController updates dataService.data.keyOne with a new value, like hello world.
The expression {{ keyOne }} once again checks for changes in $scope.keyOne during the digest cycle. Issue: $scope.keyOne remains an empty string! The displayController fails to retrieve the latest value from dataService.data.keyOne.

Thankfully, there is a simple solution. You just need to access the data object directly to accurately evaluate

data.keyOne</code when monitoring changes:</p>

<pre><code>app.service('dataService', function() {
  let data = {
    key1: ""
  }

  //Expose the data object
  this.getData = function() {
    return data;
  }
}

app.component('display', {
  controller: displayController,
  //Evaluate the current value of keyOne in the data object
  template: '<p>{{ data.keyOne }}</p>'
});

function displayController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;
  function onInit() {
    //Get a static reference to the data object.
    //The data object itself shouldn't change, but its properties will.
    self.data = dataService.getData();
  }
}

Tips for utilizing Angular 1.x services to refresh one component from another

Answer №1

Answer №2

Similar questions

Issue with close request on dialog box

My Contentful code is not functioning properly in NodeJS

Leveraging React Hooks and Axios for retrieving data and showcasing it in a table

After a pinch gesture to zoom in on HereMaps using JavaScript, the getZoom() function unexpectedly returns a value

Exploring the features of Meteor subscriptions within React

The jQuery selector for input[type=text]:nth-child(2) is malfunctioning

Explore the scope of each item in ng-repeat

Incorrect date and time displayed

Converting a JavaScript object to JSON within Node-RED

Finding the Vue module within a helper function or mixin: A step-by-step guide

Tips on retrieving data from an http request in Angular 2 after it has been successfully made

The Await function is incompatible with MongoDB collections

The proper way to style JQuery UI calendar dates

Is there a way to directly load an SVG for a leaflet divIcon without having to import it through a js file?

Generate HMAC hash using C# within a Javascript environment

Tips for triggering useEffect just once when various dependencies are updated simultaneously

Should the use of "onClick={}" be considered poor practice?

What is the reason behind being limited to sending only 5 requests if I fail to heed the data event?

Retrieve the id of the clicked hyperlink and then send it to JQuery

Ways to trigger a function in the parent component from a nested child component using Angular 1x