如何在 AngularJS UI-Router 中的狀態之間共享 $scope 資料？

在AngularJS UI-Router 中跨狀態傳遞$scope 資料

在AngularJS UI-Router 中，在子狀態之間導航不會自動從父狀態繼承$scope 資料控制器。當需要在狀態之間共享資料時，這可能會帶來挑戰。

嵌套視圖繼承

在狀態之間共享 $scope 資料的關鍵在於採用 UI-Router 視圖層次結構提供的繼承機制。當子視圖嵌套在父視圖中時，子作用域會繼承父作用域的屬性。

理解 AngularJS 作用域繼承

AngularJS 作用域繼承原型，這表示子作用域繼承其屬性和方法父範圍。使用 '。 '在 ng-model 指令的屬性名稱中確保屬性被繼承。

實作

要在狀態之間共用$scope 數據，請依照下列步驟操作：

1. 定義$scope 中的參考類型（例如，物件） ，例如$scope.Model。
2. 在父狀態下，初始化Model 物件（例如，$scope.Model = $scope.Model || {Name: "xxx"}）。
3. 在子狀態下，使用ng-model="Model.PropertyName 存取Model 物件「（例如，).

範例

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

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

依照以下步驟，您可以在UI-Router 中的狀態之間無縫共用$scope數據，確保整個應用程式中資料存取的一致性。

以上是如何在 AngularJS UI-Router 中的狀態之間共享 $scope 資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！