不幸的是我无法在组件之间传递数据。 我参加了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;
}
}
});
我的第二个组件“show”是“$ 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");
});
答案 0 :(得分:0)
要在使用服务解析的组件之间共享内容。服务是单件类,您可以在整个应用程序中使用它们存储的内容。单例类需要牢记的是,存储的数据不是持久性的,一旦应用程序终止,它将被清除。
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 = something;
服务name.setVar(myvalue的);
来自控制器B的:
var myVar = service-name.getVar();