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控制器中，我按如下方式读取数据：

myApp.controller('navCtrl', function ($scope, HeaderData) {
    console.log("NavCtrl: " +HeaderData.getVisible());
    $scope.showHeader = HeaderData.getVisible();
    $scope.pageTitle = HeaderData.getPageTitle();
});

记录以下输出：

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，而是将对象分配给范围，以便可以通过引用进行绑定。通过引用绑定，可以确保范围属性解析为相同的引用。

当您绑定到基元（string，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>

Angular Factory数据未正确共享

1 个答案: