Question

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

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成功函数中设置数据时，它不会冒出来 - 服务仍会返回'cats'作为其值。从我所读到的，服务应该是全局的，并且在其中设置数据应该是永久性的（就其目的而言）。我做错了什么，如何在同一范围内的这两个控制器之间获取数据？

Answer 1

问题是你的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() }}

修改： Simple plunkr here

编辑＃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，但它确实有效。根据您在问题中显示的内容，它应该使用函数而不是常规属性。

Answer 2

@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（）返回（引用）对象，所以视图会自动获取对该对象的更新。

角度服务不在控制器之间传递

2 个答案: