How can you interact between a parent's named controller and JavaScript files in AngularJS?

Question

How can you interact between a parent's named controller and JavaScript files in AngularJS?

Lately, I've been exploring the use of named controllers in my code and find it to be a much better alternative to using traditional $scope variables. It makes accessing parent controller attributes and functions within the DOM seamless. See an example below.

<div ng-controller="parentCtrl as parent">
    <div ng-controller="childCtrl as child">
        Parent age is {{ parent.age }}
        Child age is {{ child.age }}
    </div>
</div>

I'm now curious about how to utilize the same named controller within the JavaScript file for Angular. Something along the lines of what's shown below.

angular.controller('childCtrl',function(...) {
    var vm = this;
    this.age = 24;
    console.log(parent.age);
});

I understand that the parent needs to be injected before being used. In my current project, I'm working with RequireJS alongside UI Router which eliminates the need for angular.controller and similar constructs. Can anyone provide me with a solution using Plain vanilla Angular or with the help of RequireJS?

javascript angularjs controller requirejs named

Answer 1

Answer №1

One approach I often use is to utilize the $scope variable in order to access the scope of the parent.

app.controller('MainCtrl', function() {
  this.name = 'from parent';
});

app.controller('ChildCtrl', function($scope) {
  this.name = $scope.parent.name;
});

Here is a plunker with the complete example

For a more efficient way to share data between controllers, consider using Angular services. This helps avoid potential issues if the DOM layout is changed or a child controller is moved, as the controllers become independent of the DOM layout.

Answer 2

One approach I often use is to utilize the $scope variable in order to access the scope of the parent.

app.controller('MainCtrl', function() {
  this.name = 'from parent';
});

app.controller('ChildCtrl', function($scope) {
  this.name = $scope.parent.name;
});

Here is a plunker with the complete example

For a more efficient way to share data between controllers, consider using Angular services. This helps avoid potential issues if the DOM layout is changed or a child controller is moved, as the controllers become independent of the DOM layout.

How can you interact between a parent's named controller and JavaScript files in AngularJS?

Answer №1

Similar questions

How can I include multiple dictionary entries in a JSON file at once?

Leveraging trustAsHTML with an array of object elements

Attempting to retrieve and substitute the final value within an input field by cross-referencing or evaluating it against a different value

Employing specific delimiters with hogan-express while managing the {{{ yield }}} statement

What methods does Express use to precisely measure time intervals shorter than 1ms?

Searching for all potential arrays of length L that total N or fewer can be achieved using an algorithm

Creating functionality with a native JavaScript plugin within a directive and test suite

Leveraging TypeScript enums in conjunction with React to anticipate a string prop

Saving a JSON array into separate JS variables using AJAX

retrieving data from a different controller in AngularJS

After minimizing the window, the jQuery slider animation sped up significantly

Troubleshooting issue: Dexie.js query using .equals not functioning properly in conjunction with localStorage

The syntax in JavaScript of (0, fn)(args) is used to call

Sending Ajax data to a controller function

Despite changes in the state they are set to, the InitialValues remain constant

What could be the reason behind TypeScript ignoring a variable's data type?

Using jQuery to detect changes in the value of form fields, excluding any changes related to display toggles

JavaScript's Set data structure does not allow for the storage of strings

Using Three.js and EffectComposer to create interactive masking with an UnrealBloomPass

The babel-preset-es2016 plugin is in need of the babel-runtime peer dependency, however it seems that it