如何在沒有服務或觀察者的情況下在 AngularJS UI-Router 狀態之間共享資料？

在沒有服務或觀察者的情況下在AngularJS UI-Router 狀態之間共享$scope 資料

在UI-Router 中，在$scope 之間共享資料可能具有挑戰性主控制器及其子狀態，而不依賴父控制器中的服務或觀察者。

解決方案：

關鍵在於理解AngularJS 範圍和UI-Router 視圖之間的關係：

• 僅按層次結構繼承作用域：僅當狀態視圖嵌套時，作用域才會沿著狀態鏈繼承。
• 理解作用域：子級作用域通常原型地繼承自父作用域。使用 '。 '符號（例如 Model.PropertyName）確保這種繼承。

技術實作：

1. 定義巢狀視圖：確保子狀態視圖是巢狀的在父視圖中。
2. 使用引用類型值：在 $scope 模型中，使用透過引用傳遞的物件或引用，而不是原始值。
3. 使用點表示法：在您的 ng-model 定義中，使用點表示法來確保原型繼承（例如，使用 Model.PropertyName 而不是 PropertyName）。

範例：

考慮以下UI-Router 狀態定義：

.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'
  })  

在mainController 中，如下初始化共享資料模型：

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

在您的子狀態範本中，使用ng-model使用點符號來存取共享數據：

<input type="text" ng-model="Model.Name">

透過執行以下步驟，您可以在UI-Router 狀態下的$scope 之間有效地共享數據，而無需父控制器中的服務或觀察者。

以上是如何在沒有服務或觀察者的情況下在 AngularJS UI-Router 狀態之間共享資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！