マルチレベルコンポーネントのコールバック角度が1.5

Question

私はReact/Reduxの考え方から来ています。データ操作機能とデータは親から子に渡されます。コンポーネント自体はデータを変更するのではなく、意図はコンポーネントツリーをバックアップします。

これをAngular 1.5のコンポーネントで再現しようとしています。次のことを考えてみましょう：

app.js：

const appController = ($scope, data) => { 
    $scope.doSomething =() => console.log('Foooooo!'); 
}; 

app.html：

<div> 
    <node 
    do-something="doSomething()" 
    ></node> 
</div> 

node.js：

app.component('node', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

node.html：

：

app.component('leaf', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

leaf.html：

<div ng-click="$ctrl.doSomething()"></div> 

これは動作します。 leafのdivをクリックすると、'Foooooo!'がコンソールに記録されます。しかし、ngClickコールバックを変更してleaf（または'foo'などのリテラルだけ）のスコープ内の何かを渡し、にdoSomethingを変更して、引数がundefinedの引数を取るようにします。私の推測では、何とかデータをnodeに渡す必要がありますが、どうすればよいか分かりません。範囲内にラッパー関数を記述することなく、中間コンポーネントに沿って引数を渡す方法はありますか？私はargumentsを使ってみましたが、うまくいきません - 私が欲しいものを達成するための角度のある方法がありますか？

EDIT：

Plunkr：https://plnkr.co/edit/7L4Kd3rhJXoGlrHzecHf?p=preview

Answer 1

EDIT：これはよく、または実際に動作しない場合があります...

あなたが提供された関数を呼び出すときかのようにそれが表示されます&演算子を使用して関数を直接呼び出すのではなく、式のコンテキストの一種として引数を使用する関数を呼び出します。以下の作品：

app.js：

const appController = ($scope, data) => { 
    $scope.doSomething = value => console.log(value); 
}; 

app.html：

<div> 
    <node 
    do-something="doSomething(value)" 
    ></node> 
</div> 

node.js：

app.component('node', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

node.html：

<div> 
    <leaf 
    do-something="$ctrl.doSomething({ value: value })" 
    ></leaf> 
</div> 

leaf.js：

app.component('leaf', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

leaf.html：

<div ng-click="$ctrl.doSomething({ value: someVar })"></div>