Угловая служба не проходит между контроллерами

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 функция успеха, она не пузырится - услуга по-прежнему возвращает «кошки» в качестве ее значения. Из того, что я прочитал, службы должны быть глобальными, а установление данных в них должно быть постоянным (как и его цель). Что я делаю неправильно, и как я могу получить данные между этими двумя контроллерами в одной области?

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

Edit:Simple plunkr here

Edit # 2:

Если проблема является связующим, которая не обновляется из-за асинхронный процесс, вы можете использовать $scope.$apply:

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

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

Edit 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

В скрипку я использую $ таймаута имитировать ответ $ http.

Поскольку getObj() возвращает объект (ссылка на), обновления этого объекта автоматически захватываются представлением.