如何在沒有服務的情況下在 AngularJS UI-Router 中的狀態之間共享 $scope 資料？

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

在使用UI-Router 進行狀態管理的AngularJS 應用程式中，可能存在需要在父狀態和子狀態之間共用$scope 資料。在不使用服務或複雜的觀察者的情況下，我們如何實現這一目標？

利用視圖層次結構繼承

AngularJS UI-Router 僅當子視圖時才提供範圍屬性的繼承嵌套在父視圖中。這意味著子狀態的模板必須嵌套在父視圖的模板中。

例如，考慮以下狀態定義：

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

在這種情況下，子視圖的視圖子狀態（“form_1.html”和“form_2.html”）嵌套在在父狀態（“main_init.html”）的視圖中。這使得 $scope 屬性從父狀態繼承到子狀態。

使用引用類型和點表示法

為了確保資料共享，使用點表示法在父控制器的 $scope 中定義引用類型至關重要。例如：

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

透過使用點表示法，我們確保 $scope.Model 是引用型別。在子狀態下存取時，將與父狀態下建立的 $scope.Model 實例相同，方便資料共用。

範例

範例中問題中提供的主控制器和子狀態已正確設定以進行範圍繼承。問題在於點符號的使用不當。透過修改子狀態下的ng-model引用$scope.Model.Name，即可建立資料共享。

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