0

我在并行范围级别上有两个控制器，我需要在以下之间传递数据：

function TableRowCtrl($scope, $http, sharedProperties) {
  console.log(sharedProperties.getProperty());
  $scope.items = sharedProperties.getProperty();
}

和

function SideNavCtrl($scope, $http, sharedProperties) {
  $scope.customers = undefined;
  var temp = "cats";

  $http.get('data/customers.json').success(function(data) {
    $scope.customers = data;
    temp = "dogs";
    sharedProperties.setProperty(temp)
  });

  sharedProperties.setProperty(temp);
  console.log(sharedProperties.getProperty());
}

我正在尝试使用服务来执行此操作（通过我看到的示例）：

angular.module('myApp', []).service('sharedProperties', function() {
var property = "Cats";
return {
    getProperty: function() {
        return property;
    },
    setProperty: function(value) {
        property = value;
    }
};
});

但是 - 当我尝试在 SideNavCtrl http 成功函数中设置数据时，它不会冒泡 - 服务仍然返回“猫”作为其值。根据我的阅读，服务应该是全局的，并且在其中设置数据应该是永久性的（这是它的目的）。我做错了什么，如何在同一范围内的这两个控制器之间获取数据？

4

2 回答 2

4

问题是您TableRowCtrl将函数的结果保存在其范围变量中。当服务本身发生变化时，范围内的值不会发生变化，因为此时它是一个简单的属性。您可以直接在作用域中公开您的服务，也可以将 $scope.items 包装在一个函数中：

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.items = function() { return sharedProperties.getProperty(); };
}

// And in your view
{{ items() }}

或者

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.shared = sharedProperties;
}

// And in your view
{{ shared.getProperties() }}

编辑： 简单的 plunkr 这里

编辑#2：

如果问题是由于异步过程而未更新的绑定，您可以使用$scope.$apply：

$http.get('data/customers.json').success(function(data) {
  $scope.customers = data;
  temp = "dogs";
  sharedProperties.setProperty(temp)

  if(!$scope.$$phase)
    $scope.$apply();
});

编辑3：

我已经重新创建$http.get并更新了plunkr并且它可以工作。根据您在问题中显示的内容，它应该使用函数而不是常规属性来工作。

于 2013-08-14T14:56:00.900 回答
0

@SimomBelanger 已经发现了问题。我建议使用对象而不是原语，那么您不需要在视图中调用函数：

<div ng-controller="TableRowCtrl">items={{items.property}}</div>
<div ng-controller="SideNavCtrl">customers={{customers}}</div>


app.service('sharedProperties', function () {
    var obj = {
        property: "Cats"
    };
    return {
        getObj: function () {
            return obj;
        },
        setObjProperty: function (value) {
            obj.property = value;
        }
    };
});

function SideNavCtrl($scope, $timeout, sharedProperties) {
    $scope.customers = undefined;
    var temp = "cats";
    $timeout(function () {
        $scope.customers = 'some data';
        temp = "dogs";
        sharedProperties.setObjProperty(temp);
    }, 2000);
    sharedProperties.setObjProperty(temp);
}

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.items = sharedProperties.getObj();
}

fiddle

在小提琴中，我使用 $timeout 来模拟 $http 响应。

因为 getObj() 返回一个（对一个）对象的引用，所以视图会自动获取对该对象的更新。

于 2013-08-14T15:19:45.107 回答