Как получить доступ к значению объекта другого углового компонента

Question

К сожалению, я не могу передавать данные между компонентами. Я взял демоверсию bcqr-reader на https://embed.plnkr.co/m9dtF9llcAw7eYE94b5k/preview и передал отсканированную информацию на мой второй компонент. Сначала вы можете увидеть мой компонент сканирования. «$ scope.url» - мой объект интереса.

angular.module('foo').component('scan', { 
    bindings:{url:"="}, 
    templateUrl: 'templates/scan.html', 
    controller:function($scope){ 

     $scope.start = function() { 
     $scope.cameraRequested = true; 
    } 

    $scope.processURLfromQR = function (url) { 
    $scope.url = url; 
    $scope.cameraRequested = false; 
    } 

    } 

}); 

Мой второй компонент «шоу» является пунктом назначения «$ scope.url». Позже мне понадобится $ scope.url, чтобы использовать его как id для запроса couchdb. Я много читал, об обмене данными между компонентами, но я не стал работать. Я также попытался сохранить объект как $ rootScope. Я предпочел бы решение, основанное на событиях, например $ onChanges, но теперь любая помощь приветствуется.

angular.module('foo').component('show', { 
template: '<p> Transfered value: {{$ctrl.url}}</p>', 
bindings:{url:"="}, 
require: { url:'^scan' 
}, 
controller: function() { 
this.$onInit = function() { 
console.log(this.foo.url); // 
    }; } 

});

Мой app.js файл выглядит следующим образом:

myApp.config(function($stateProvider,$urlRouterProvider) { 
var scanState = { 
name: 'scan', 
url: '/scan', 
component:'scan' 
} 

var showState = { 
name:'show', 
url: '/show', 
component:'show' 
} 

$stateProvider.state(scanState); 
$stateProvider.state(showState); 

$urlRouterProvider.otherwise("scan"); 
}); 

Answer 1

Чтобы разделить материал между компонентами можно решить с помощью служб. Службы - это одноэлементные классы, и то, что вы храните в них, доступно во всем вашем приложении. То, что следует учитывать при использовании одноэлементных классов, заключается в том, что сохраненные данные не являются постоянными и будут удалены после прекращения приложения.

app.service('service-name', function(){ 

    var myVar = undefined; 

    var service-name = { 
     setVar: function(_value){ 
      myVar = _value; 
     }, 
     getVar: function(){ 
      return myVar; 
     } 
    };  

    return service-name; 
}); 

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

форма контроллер A:

вар MyValue = что-то;

service-name.setVar (myValue);

от контроллера B:

вар MyVar = сервис-name.getVar();