如何访问另一个角​​度分量的对象值

Question

Unfortunately I can't pass data between components. I took the bcqr-reader demo at https://embed.plnkr.co/m9dtF9llcAw7eYE94b5k/preview and pass the scanned information to my second component. First you can see my scan-component. "$scope.url" is my object of interest.

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;
  }

  }

});

My second component "show" is the destination of "$scope.url". Later i will need $scope.url to use it as an id for a couchdb query. I read a lot, about data exchange between components but i didn't get i running. I also tried to store the object as $rootScope. I would preferre an event based solution like $onChanges, but now every help is welcome.

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); // 
  }; }

});

My app.js file looks like:

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

To share stuff between components you may resolve using Services. Services are singleton classes and what you store in them is available throughout your whole application. The thing to keep in mind with singleton classes is that the data stored is not persistent and will be cleared once the app is terminated.

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

   var myVar = undefined;

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

   return service-name;
});

To use the service from a controller just declare it in the controller's dependency and use like so :

form controller A :

var myValue = something;

service-name.setVar(myValue);

from controller B:

var myVar = service-name.getVar();