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

时间:2017-01-30 12:26:02

标签: angularjs angular-ui-router angular-components

不幸的是我无法在组件之间传递数据。 我参加了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");
});

1 个答案:

答案 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();