How to Share $scope Data Between States in AngularJS UI-Router Without Services?

Sharing $scope Data Between States in AngularJS UI-Router

In AngularJS applications utilizing UI-Router for state management, there may be a need to share $scope data between parent and child states. Without employing a service or convoluted watchers, how can we achieve this?

Utilizing View Hierarchy Inheritance

AngularJS UI-Router provides inheritance of scope properties only when the child view is nested within the parent view. This means that the templates of the child states must be nested within the parent view's template.

For example, consider the following state definitions:

.state("main", {
 controller:'mainController',
 url:"/main",
 templateUrl: "main_init.html"
})  
.state("main.1", {
 controller:'mainController',
 parent: 'main',
 url:"/1",
 templateUrl: 'form_1.html'
})  
.state("main.2", {
 controller:'mainController',
 parent: 'main',
 url: "/2",
 templateUrl: 'form_2.html'
})  

In this scenario, the views of the child states ("form_1.html" and "form_2.html") are nested within the view of the parent state ("main_init.html"). This enables the inheritance of $scope properties from the parent state to the child states.

Using Reference Types and Dot Notation

To ensure that data is shared, it is crucial to define a reference type in the parent controller's $scope using dot notation. For instance:

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

By employing dot notation, we ensure that $scope.Model is a reference type. When accessed in a child state, it will be the same instance of $scope.Model created in the parent state, facilitating data sharing.

Example

In the example provided in the question, the main controller and child states are set up correctly for scope inheritance. The issue lies in the improper usage of dot notation. By modifying the ng-model in the child state to reference $scope.Model.Name, the data sharing will be established.

The above is the detailed content of How to Share $scope Data Between States in AngularJS UI-Router Without Services?. For more information, please follow other related articles on the PHP Chinese website!