Home > Article > Web Front-end > How to Share Data Between AngularJS UI-Router States Without Services or Watchers?
In UI-Router, it can be challenging to share data between the $scope of a main controller and its child states without relying on services or watchers in the parent controller.
The key lies in understanding the relationship between AngularJS scopes and UI-Router views:
Consider the following UI-Router state definition:
.state("main", { controller:'mainController', url:"/main", templateUrl: "main_init.html" }) .state("main.1", { parent: 'main', controller:'mainController', url:"/1", templateUrl: 'form_1.html' }) .state("main.2", { parent: 'main', controller:'mainController', url: "/2", templateUrl: 'form_2.html' })
Within the mainController, initialize the shared data model as follows:
controller('mainController', function ($scope) { $scope.Model = $scope.Model || {Name : "xxx"}; })
In your child state templates, use ng-model with dot notation to access the shared data:
<input type="text" ng-model="Model.Name">
By following these steps, you can effectively share data between $scopes in UI-Router states without the need for services or watchers in parent controllers.
The above is the detailed content of How to Share Data Between AngularJS UI-Router States Without Services or Watchers?. For more information, please follow other related articles on the PHP Chinese website!