Посмотрев на ваш HTML-код;Я вижу, что оба контроллера уже были созданы.
Таким образом, когда вы делаете $scope.receivedVal = sharedProperties.getString(); в контроллере 2, вы просто получаете значение от обслуживания только один раз ( Примечание: Вы не наблюдаете постоянно значение от обслуживания).И, следовательно, в шаблоне контроллера 2 должно отображаться значение по умолчанию firstoccurence.
Вы фактически обновляете значение нажатием кнопки ОК, которое, в свою очередь, обновляет значение в сервисе.Но вы не можете сказать angular, что теперь, когда значения были изменены, теперь контроллер 2 должен получить это новое значение.
Чтобы активировать нужный сценарий, вам нужно использовать $broadcast и $onтак что вы можете постоянно наблюдать за изменениями, происходящими в контроллере 1.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Search:<input type="text" ng-model="newValue"></p>
<button ng-click="myFunc(newValue)">OK</button>
</div>
<div ng-controller="myCtrl2">
{{receivedVal}}
<button ng-click="thisWillGetValFromService()" >update this scope's value</button>
</div>
<script>
var app= angular.module('myApp', []);
app.controller('myCtrl', function($rootScope,$scope,sharedProperties) {
$scope.stringValue = sharedProperties.getString();
$scope.myFunc = function(newValue) {
sharedProperties.setString(newValue);
$scope.stringValue = sharedProperties.getString();
console.log($scope.stringValue);
//I am getting the value here by calling sharedProperties.getString();
$rootScope.$broadcast('greeting', newValue);
};
});
app.controller('myCtrl2', function($scope,sharedProperties) {
$scope.receivedVal = sharedProperties.getString();
console.log($scope.receivedVal);
//But I am not getting the updated value here by calling sharedProperties.getString();
$scope.$on('greeting', function(ev,val){
$scope.receivedVal = val
})
});
app.service('sharedProperties', function() {
var stringValue = 'firstoccurence';
return {
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
},
}
});
</script>
</body>
Вышеупомянутый фрагмент должен решить вашу проблему.
Обновлено:
Рассмотрим сценарий, в котором определена конфигурация маршрутизации.Таким образом, по умолчанию только контроллер 1 и его шаблоны загружаются в HTML.Затем вы обновляете свое поле ввода и нажимаете кнопку ОК.Это сохранит данные для обслуживания.
Затем, при нажатии на какую-либо ссылку, вы перенаправляете приложение на маршрут вашего контроллера 2, так что в этот момент ваш контроллер 2 будет создан, и $scope.receivedVal = sharedProperties.getString(); это дастВы обновили значение.
Это просто вопрос, когда вы загружаете свой шаблон (контроллер). В вашем случае вы загружаете оба контроллера одновременно, поэтому вам нужно использовать широковещательную рассылку и включить.Но если ваш второй компонент будет загружен позже, вы всегда можете использовать сервис.