Can a child controller inherit a service "similar to" instance from its parent in any way?

Question

Can a child controller inherit a service "similar to" instance from its parent in any way?

Within my application, I utilize window instances that can encompass various views. Each window has the capability to contain multiple views as children elements.

function windowController($scope, WindowService) {
    WindowService.setWindowConfig($scope.window);
}

function viewController($scope, WindowService) {
    WindowService.updateDirtyState(true);
}

I am seeking a method to update the window from its associated view(s), while ensuring that only direct children have the ability to modify their parent windows. Since services are singletons, updating a view would impact all windows collectively.

Is there a solution to achieve this objective without requiring the use of an identifier for tracking purposes?

javascript angularjs angularjs-controller

Answer 1

Answer №1

Services are like singletons, yet they have the capability to include constructors for objects beyond the one they return.

Here is an example outline of a service that makes use of this concept:

.factory('WindowService', function(){
  var service = {};

  var Window = function() {
    ...
  };

  Window.prototype.doSomething = function(){
    ...
  };

  var View = function(window) {
    this.window = window;
  };

  service.newWindow = function(){
    return new Window();
  }

  service.newView = function(){
    return new View(window);
  }

  return service;
});

If each ViewController has its individual parent WindowController, you can create them in this manner:

.controller('WindowController', function($scope, WindowService){
  $scope.window = WindowService.newWindow();
})
.controller('ViewController', function($scope, WindowService){
  $scope.view = WindowService.newView($scope.window);
})

You don't need to be concerned about IDs as the view objects will hold references to their window parents. In fact, if all ViewControllers have a WindowController parent, you can access that scope variable through prototypical inheritance by using $scope.window from the view directly instead of going through WindowService for window object access.

.controller('ViewController', function($scope, WindowService){
    $scope.view = WindowService.newView($scope.window);
    // no need for $scope.view.window.doSomething(), although it's possible
    $scope.window.doSomething();
})

Demo

Answer 2

Services are like singletons, yet they have the capability to include constructors for objects beyond the one they return.

Here is an example outline of a service that makes use of this concept:

.factory('WindowService', function(){
  var service = {};

  var Window = function() {
    ...
  };

  Window.prototype.doSomething = function(){
    ...
  };

  var View = function(window) {
    this.window = window;
  };

  service.newWindow = function(){
    return new Window();
  }

  service.newView = function(){
    return new View(window);
  }

  return service;
});

If each ViewController has its individual parent WindowController, you can create them in this manner:

.controller('WindowController', function($scope, WindowService){
  $scope.window = WindowService.newWindow();
})
.controller('ViewController', function($scope, WindowService){
  $scope.view = WindowService.newView($scope.window);
})

You don't need to be concerned about IDs as the view objects will hold references to their window parents. In fact, if all ViewControllers have a WindowController parent, you can access that scope variable through prototypical inheritance by using $scope.window from the view directly instead of going through WindowService for window object access.

.controller('ViewController', function($scope, WindowService){
    $scope.view = WindowService.newView($scope.window);
    // no need for $scope.view.window.doSomething(), although it's possible
    $scope.window.doSomething();
})

Demo

Can a child controller inherit a service "similar to" instance from its parent in any way?

Answer №1

Similar questions

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

Troubleshooting: Success with AJAX call in Chrome, but issues in IE

What are some effective techniques for training a model with complex, multidimensional data?

Display data from two MySQL tables using AngularJS

In JavaScript, arrays are typically implemented using which data structure?

Designing interactive elements that conceal individual paragraphs

There seems to be a glitch with jQuery on my Angular.js website

Disable image loading for users who have javascript enabled

Creating a dynamic SlickGrid spreadsheet - a step-by-step guide

Update the functionality of the Rotate library event

Utilize AdWords Scripts/Javascript to display array objects on separate rows within a spreadsheet

Is there a way to verify if a module is already present in Angular?

Tips for keeping a video background stationary while allowing the text to move smoothly

Could use some help with configuring express routes with parameters

Angular 1.5 - Component for fetching HTML content with dynamic data

What is the best way to retrieve an AJAX response from a different domain?

Node.js TypeError: Unable to access property 'path' of an undefined object

Creating an OAuth2 Request in Node.js

display a message of achievement within the $http response

Tips for showcasing several thumbnails simultaneously as you upload images on a webpage with HTML and JavaScript