AngularJSディレクティブ要素メソッドバインディング-TypeError:「in」演算子を使用して「functionName」を1で検索することはできません



Angularjs Directive Element Method Binding Typeerror



解決:

式のバインディングを定義したので(&)、次を含むオブジェクトリテラルパラメータを使用して明示的に呼び出す必要がありますHTMLでバインドする場合はidedit-website = 'editWebsite(id)'。

確かに、Angularはこれが何であるかを理解する必要がありますidはHTMLにあり、スコープの一部ではないため、次のようにして「ローカル」と呼ばれるものを呼び出しに追加する必要があります。



click-data = 'editWebsite({id:website.id})'

または代替として:

click-data = 'onClick(website.id)'

コントローラ/リンクコードの場合:



$ scope.onClick = function(id){// 'editWebsite'のローカルに 'id'を広告します$ scope.editWebsite({id:id}); }

AngularJSのドキュメントには、この説明が含まれています。を含む例を探してください'close({message:'今のところ終了 '})'次のURL:

https://docs.angularjs.org/guide/directive


TL; DR; -バインドされた関数が子コンポーネントに渡されていると想定しています。これは正しくありません。実際、AngularJSは文字列テンプレートを解析して新しい関数を作成し、それが親関数を呼び出します。



この関数は、単純な変数ではなく、キーと値を持つオブジェクトを受け取る必要があります。

長い説明

これは、「&」を使用して関数をバインドし、コントローラーからその関数を呼び出そうとして、プレーン変数の名前を含むオブジェクトではなくプレーン変数を渡した場合に発生します。オブジェクトキーは、バインドされた関数に値を渡す方法を理解するためにテンプレートエンジンによって必要とされます。

例えば。あなたは電話しましたではなくboundFunction( 'cats')boundFunction({value: 'cats'})

実施例

次のようなコンポーネントを作成するとします。

const MyComponent = {バインディング:{onSearch: '&'}、コントローラー:コントローラー};

この関数(親)は次のようになります。

onSearch(value){//検索を行う}

親テンプレートで、これを実行できるようになりました。

  

ここでのバインディングは文字列から解析されます。 実際に関数を渡しているわけではありません。 AngularJSは、関数を呼び出す関数を作成しています。テンプレートで作成されたバインディングには、関数呼び出し以外の多くのものを含めることができます。

AngularJSはどういうわけかどこで入手できるかを考え出す必要がありますからの値であり、親からオブジェクトを受け取ることによってこれを行います。

myComponentコントローラーで、次のようなことを行う必要があります。

handleOnSearch(value){if(this.onSearch){this.onSearch({value:value})}}