別の角度コンポーネントのオブジェクト値にアクセスする方法

Question

残念ながら、コンポーネント間でデータを渡すことはできません。 私はbcqr-readerのデモを https://embed.plnkr.co/m9dtF9llcAw7eYE94b5k/preview にして、スキャンした情報を私の2番目のコンポーネントに渡しました。 まず、スキャンコンポーネントを見ることができます。 "$ scope.url"は私の関心対象です。

私の第2のコンポーネント「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"); 
}); 

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：

するvar myValue =何か。

サービス名.setVar（myValue）;コントローラBから

：

するvar myVarに=サービスname.getVar（）。