角度工廠數據不能正確共享

Question

我想從當前視圖中的控制器共享一些數據到我的導航欄。但數據共享錯誤，或者沒有正確同步。

這是我廠：

myApp.factory('HeaderData', function() { 
    var data = { 
     Visible: true, 
     PageTitle: '' 
    }; 

    return { 
     getVisible: function() { 
      return data.Visible; 
     }, 
     setVisible: function (visible) { 
      data.Visible = visible; 
      console.log("HeaderData: " +visible); 
     }, 
     getPageTitle: function() { 
      return data.PageTitle; 
     }, 
     setPageTitle: function (title) { 
      data.PageTitle = title; 
     } 
    }; 
}); 

然後在我的控制器，我做了以下內容：

myApp.controller('homeCtrl',function ($scope, HeaderData) { 
    HeaderData.setVisible(false); 
    console.log("HomeCtrl: " + HeaderData.getVisible()); 
}); 

在導航控制器

我在讀取數據類似以下內容：

會記錄以下輸出：

NavCtrl: true 
HeaderData: false 
HomeCtrl: false 

所以設置我的數據之前我NavContrl被加載，這是合乎邏輯的，因爲它是這樣的HTML：

<div ng-controller="navCtrl"> 
    <ng-include ng-show="showHeader" src="'../partials/common/header.html'"></ng-include> 
</div> 

<div ng-view></div> 

所以，我怎樣才能使它的工作，我的navCtrl正確地更新數據，並在此示例中將$scope.showHeader設置爲false時隱藏標題？

Answer 1

不是給$ scope分配一個基元，而是將一個對象分配給作用域，以便可以通過引用進行綁定。通過引用進行綁定，確保範圍屬性解析爲相同的引用。

當您綁定到基元（字符串，整型等）時，它會在分配後立即在作用域上創建原始值的副本。現在，您在不同範圍上有多個變量副本，並且它們的行爲都彼此獨立。

myApp.factory('HeaderData', function() { 
    var data = { 
    Visible: true, 
    PageTitle: '' 
    }; 

    return { 
    ... 
    getData = function() { 
     return data; 
    } 
    }; 
}); 

並分配模型範圍：

myApp.controller('navCtrl', function($scope, HeaderData) { 
    $scope.data = HeaderData.getData(); 
}); 

而在你的HTML：

<div ng-controller="navCtrl"> 
    <div ng-show="data.Visible">HEADER</div> 
</div>