Получить данные в Угловой службе и передать ее другому контроллеру

Question

Я не знаю, правильно ли это решение проблемы, которую я пытаюсь решить, если у вас есть идея или более эффективный способ сделать это Я все открываю для вещей :). Я знаю, что могу сделать это и с трансляцией значения, но я хочу использовать сервис для изменения и изменения данных на основе значений, которые он получает. Я просто упростил это только в надежде, что это уже сработает.

Так что же происходит, я посылаю значение по клику на службе с:

$scope.newName = function(name) { 
    nameService.newName(name); 
}; 

Чем получить значение в моей службе и попытаться отправить его на другой контроллер с:

var placeHolderName = 'anonymouse'; 
    var name = []; 

    return { 
     newName: function (repsonse) { 
      placeHolderName = 'noAnonymouse' 
      name = 'hi new' + repsonse; 
     }, 

     getNewName: function() { 

      if (placeHolderName === 'anonymouse') { 
       return placeHolderName; 
      } 
      else { 
       return name; 
      } 
     } 
    }; 

Но поскольку вы можете увидеть, нет ли переданного значения, он просто содержит имя «anonymouse», когда есть новое переданное значение, больше нет необходимости в переменной-заполнителе.

и пытается обновить имя «anonymouse» после того, как новое значение передано через службу, и оно обновит область $ с новым значением. Im извлечения его:

$scope.name = nameService.getNewName(); 

$scope.$watch('name', function(newValue, oldValue) { 
    console.log(newValue, oldValue); 
}); 

Это, к сожалению, не работает так, как я пытаюсь использовать его здесь.

Answer 1

Обновленный ответ, основанный на codepen:

Вместо того, чтобы смотреть name, вы должны следить за изменениями в service.getName

var app = angular.module('test', []); 
 

 
app.controller('sendController', function($scope, service) { 
 
    $scope.newName = function(name) { 
 
    service.setName(name); 
 
    }; 
 
}); 
 

 
app.controller('getController', function($scope, service) { 
 
    $scope.name = service.getName(); 
 
    $scope.$watch(service.getName, function(newValue, oldValue) { 
 
    $scope.name = newValue; 
 
    }); 
 
}); 
 

 
app.factory('service', function() { 
 
    var name = 'anonymouse'; 
 
    return { 
 
    setName: function(newName) { 
 
     name = newName 
 
    }, 
 
    getName: function() { 
 
     return (name === 'anonymouse') ? name : 'hi new' + name; 
 
    } 
 
    } 
 
}); 
 
var el = document.getElementById('container'); 
 
angular.bootstrap(el, ['test']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div id="container"> 
 
    <div ng-controller="sendController"> 
 
    <button ng-click="newName('bob')">Bob</button> 
 
    <button ng-click="newName('Dennis')">Dennis</button> 
 
    </div> 
 

 
    <div ng-controller="getController"> 
 
    {{ name }} 
 
    </div> 
 
</div>

Вы также можете удалить $scope.$watch и сделать $scope.name = service.getName; вместе с обновление выражения до {{ name() }}

---

Если я правильно понял, вы можете просто сделать это:

var name = 'Anonymous'; 
    return { 
    setName: function(newName) { 
    name = newName 
    }, 
    getName: function() { 
    return (name === 'Anonymous') ? name : 'hi new' + name; 
    };