如何访问另一个角​​度组件的对象值

Question

不幸的是，我无法在组件之间传递数据。 我采取了bcqr阅读器演示 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将其用作couchdb查询的ID。 我读了很多，关于组件之间的数据交换，但我没有得到我运行。我也尝试将对象存储为$ 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

要共享的组件之间的东西，你可以用服务解决。服务是单身人士课程，您在其中存储的内容可在整个应用程序中使用。要记住singleton类的事情是，存储的数据不是持久的，并且一旦应用程序终止就会被清除。

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

    var myVar = undefined; 

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

    return service-name; 
}); 

要使用从控制器的服务只需要声明它在控制器的依赖和使用，像这样：

形式控制器A：

VAR myvalue的东西=;

service-name.setVar（myValue）;

来自控制器B：

变种myVar的=服务name.getVar（）;