コンポーネントのコールバックが正常に動作しないのはなぜですか？

Question

私はhttp://www.codelord.net/2016/05/13/understanding-angulars-and-binding/に従って、AngularJSコンポーネントのコールバックを実装しようとしています。 https://plnkr.co/edit/dxyI0p0pZFZdMalLfvXO?p=previewに、私が持っている問題を説明しようとしました。コンポーネントを次の3つの異なる方法でインスタンス化します。

<section id="main-content" ng-controller="myPageController as ctrl"> 
<my-component label="Scope" myChange="cb()"></my-component> 
<my-component label="Ctrl" myChange="ctrl.cb()"></my-component> 
<my-component label="Page" myChange="page.cb()"></my-component> 
</section> 

しかし、どれも動作しません。コンポーネントのチェックボックスに関連付けられた関数によって記録されたメッセージが表示されますが、コールバックからのメッセージは表示されず、エラーも表示されません。私は何が欠けていますか？

Answer 1

"onchange"はHTML要素の予約属性です。 myChangeのように別の名前を使用します。 ここhttps://www.w3schools.com/tags/att_onchange.asp

Answer 2

を参照してくださいすることはPlunkerです：https://embed.plnkr.co/OYpLu8/

あなたはこれにmyPage.incを提出変更する場合：

<section id="main-content" ng-controller="myPageController as ctrl"> 

    <h2>This is the page.</h2> 
    <my-component label="Scope" ng-model="confirmed" ng-change="cb()"></my-component> 
    <my-component label="Ctrl" ng-model="confirmed" ng-change="ctrl.cb()"></my-component> 
    <my-component label="Page" ng-model="confirmed" ng-change="page.cb()"></my-component> 

</section> 

をしかし、それは唯一のng-change問題を解決します。

これらのng-modelは何もしません、このモデルconfirmedはどんなコントローラにも存在しません、ちょうどng-changeの作品です。

---

編集：あなたが呼び出されるこの関数にディレクティブに関数を渡す必要があります。あなたが行う方法は、あなたの指示の中にscopeを作成することです。

'scope': { 
    'yourFunction': '&' 
} 

そして、あなたのcomponent内で呼び出します。

<label>{{vm.label}}</label> 

<input type="checkbox" ng-click="vm.handleCheckboxClick()" ng-model="confirmed" ng-change="yourFunction()"/><br> 

そして今、あなたは部外関数を呼び出したい毎回、あなたはあなたのcomponentに、この関数を渡す必要があります。

<my-component label="Scope" your-function="cb()"></my-component> 
<my-component label="Ctrl" your-function="ctrl.cb()"></my-component>