Guidelines on updating syntax-defined variables in a controller?

Question

Guidelines on updating syntax-defined variables in a controller?

Here is the code snippet I am currently working with:

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

var appCtrl = app.controller('AppCtrl', AppCtrl);

function AppCtrl(){
  var appCtrl = this;
  appCtrl.variable = "search";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app = "app">
  <div ng-controller = "AppCtrl as ctrl1">
     {{ctrl1.variable}}
  </div>
  <div ng-controller = "AppCtrl as ctrl2">
    <input type="search" ng-model = "ctrl2.variable"/>
     {{ctrl2.variable}}
  </div>
</div>

After updating ctrl2.variable, the value of ctrl1.variable remains unchanged.

Is there a way to update it without resorting to using $scope?

javascript angularjs

Answer 1

Answer №1

If you're looking for a straightforward solution that doesn't involve using $scope.$watch, one approach is to utilize a shared state concept, as demonstrated below.

Essentially, both controllers have access to the same object reference, enabling observation of any changes made to the value.

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

app.factory('SharedState', SharedState);

function SharedState(){
  var shared = this;
  state = {variable: "search"};
  
  shared.getState = function() {
    return state;  
  }
  
  return shared;
}

app.controller('AppCtrl', AppCtrl);

function AppCtrl(SharedState){
  var appCtrl = this;
  appCtrl.sharedState = SharedState.getState();

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app = "app">
  <div ng-controller = "AppCtrl as ctrl1">
     {{ctrl1.sharedState.variable}}
  </div>
  <div ng-controller = "AppCtrl as ctrl2">
    <input type="search" ng-model = "ctrl2.sharedState.variable"/>
     {{ctrl2.sharedState.variable}}
  </div>
</div>

Answer 2

If you're looking for a straightforward solution that doesn't involve using $scope.$watch, one approach is to utilize a shared state concept, as demonstrated below.

Essentially, both controllers have access to the same object reference, enabling observation of any changes made to the value.

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

app.factory('SharedState', SharedState);

function SharedState(){
  var shared = this;
  state = {variable: "search"};
  
  shared.getState = function() {
    return state;  
  }
  
  return shared;
}

app.controller('AppCtrl', AppCtrl);

function AppCtrl(SharedState){
  var appCtrl = this;
  appCtrl.sharedState = SharedState.getState();

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app = "app">
  <div ng-controller = "AppCtrl as ctrl1">
     {{ctrl1.sharedState.variable}}
  </div>
  <div ng-controller = "AppCtrl as ctrl2">
    <input type="search" ng-model = "ctrl2.sharedState.variable"/>
     {{ctrl2.sharedState.variable}}
  </div>
</div>

Answer 3

Answer №2

Adricadar's response is completely adequate.

However, I'd like to share the code snippet that I wrote:

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

var appCtrl = app.controller('AppCtrl', AppCtrl);

appCtrl.$inject = ['ShareDataService'];

function AppCtrl(ShareDataService){
  var appCtrl = this;
  appCtrl.variable = "search";
 
   appCtrl.setSearchQuery = function () {    
       ShareDataService.setSearchQuery(appCtrl.variable);
    }
     
appCtrl.getSearchQuery = function () {    
        return ShareDataService.getSearchQuery();
    }
 
}

var sharedDataService = app.service('ShareDataService',ShareData);

function ShareData(){
  var shareDataService = this;
    
  shareDataService.searchQuery = "";

  shareDataService.getSearchQuery = function(){
return shareDataService.searchQuery;
  }

  shareDataService.setSearchQuery = function(searchQuery){
shareDataService.searchQuery = searchQuery;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app = "app">
  <div ng-controller = "AppCtrl as ctrl1">
     {{ctrl1.getSearchQuery()}}
  </div>
  <div ng-controller = "AppCtrl as ctrl2">
    <input type="search" ng-model = "ctrl2.variable" ng-change="ctrl2.setSearchQuery()"/>
     {{ctrl2.variable}}
  </div>
</div>

The principle behind it is as follows:

Service acts as a Singleton Object, with only one instance created.
Implemented setter and getter methods for functionality.

Answer 4

Adricadar's response is completely adequate.

However, I'd like to share the code snippet that I wrote:

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

var appCtrl = app.controller('AppCtrl', AppCtrl);

appCtrl.$inject = ['ShareDataService'];

function AppCtrl(ShareDataService){
  var appCtrl = this;
  appCtrl.variable = "search";
 
   appCtrl.setSearchQuery = function () {    
       ShareDataService.setSearchQuery(appCtrl.variable);
    }
     
appCtrl.getSearchQuery = function () {    
        return ShareDataService.getSearchQuery();
    }
 
}

var sharedDataService = app.service('ShareDataService',ShareData);

function ShareData(){
  var shareDataService = this;
    
  shareDataService.searchQuery = "";

  shareDataService.getSearchQuery = function(){
return shareDataService.searchQuery;
  }

  shareDataService.setSearchQuery = function(searchQuery){
shareDataService.searchQuery = searchQuery;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app = "app">
  <div ng-controller = "AppCtrl as ctrl1">
     {{ctrl1.getSearchQuery()}}
  </div>
  <div ng-controller = "AppCtrl as ctrl2">
    <input type="search" ng-model = "ctrl2.variable" ng-change="ctrl2.setSearchQuery()"/>
     {{ctrl2.variable}}
  </div>
</div>

The principle behind it is as follows:

Service acts as a Singleton Object, with only one instance created.
Implemented setter and getter methods for functionality.

Guidelines on updating syntax-defined variables in a controller?

Answer №1

Answer №2

Similar questions

Is there a way to update and reload the latest data in ApexCharts?

I am confident in my code, but why is eslint throwing an error? How can this be happening?

The Angular2 cli throws an error stating: "Cannot add a new entry to an existing one."

Exploring Objects without the need for loops

Tips for updating table row TD value using a query

The current version of HTML5 Context Menus is now available

Displaying a checklist that shows all items that have been selected, rather than only showing the first selected item

Clarification: Javascript to Toggle Visibility of Divs

What is the best way to display images one by one from a map using a random fade effect?

Sometimes the downloaded xlsx file may become corrupted

Having an issue where I receive the error message "this.cancelOrderFunction is not a function" when trying to execute a method within a child component in Vue.js

What sets Vue.js apart, class and staticClass - is there a distinction?

Having trouble retrieving information from combineLatest in Angular?

Incorporating a variable into a regular JavaScript pattern

Expandable Grid Interface: Featuring a Button for Interactive Actions

Using an Angular variable in a JavaScript function may seem challenging at first, but with

What is the best way to test an Angular application using John Papa's style, as well as Karma and Jasmine, all while

Sending a variable to the resize() function in jQuery

What is the best way to configure angular $filter to perform case-sensitive string comparisons when filtering data?

How can I update and edit the State in React when using a bootstrap modal?