Угловые данные фабрики не используются правильно

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()); 
}); 

в контроллере Nav я прочитал данные, как следующее:

регистрируется следующий выход:

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 назначьте объект в область видимости, чтобы вы могли привязываться по ссылке. При привязке по ссылке вы убедитесь, что свойства области разрешены к одной и той же ссылке.

Когда вы привязываетесь к примитиву (строка, int и т. Д.), Он создает копию исходного значения в области, как только она назначается. Теперь у вас несколько копий переменной в разных областях, и все они ведут себя независимо друг от друга.

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>