ディレクティブコントローラのメソッドを親$スコープにバインドする

Question

問題を説明する前に正確に何をしようとしているのかを説明します。私はフォームを保持するディレクティブを持っており、フォームが有効であることを確認するためにサブミット・ボタンをクリックすると、親エレメント（ディレクティブが使用される）からそのフォームにアクセスする必要があります。

これを行うには、私は$scope.$parent[$attrs.directiveName] = this;を使用して、this.isValidのような、ディレクティブにいくつかのメソッドをバインドして親に公開して実行しようとしています。

ローカルで実行しているときにうまく動作しますが、コードを細工してビルドするときに、aProviderがコントローラの$scopeProviderエラーにトレースされたエラーが発生します。

私は過去に同様の問題を抱えていましたが、最初に考えたのは、$scopeのために具体的に$injectと言う必要があるということでした。しかし、悲しいかな......運がない。

私が間違っていることが明らかに明白なことはありますか？

助けてください。

Answer 1

ディレクティブをコンポーネントに変更して、クリアなインターフェイスを実装します。

親コンテナ（parent.html）：

<form-component some-input="importantInfo" on-update="someFunction(data)">  
</form-component> 

親コントローラ（parent.js）：

//... 

$scope.importantInfo = {data: 'data...'}; 
$scope.someFunction = function (data) { 
    //do stuff with the data 
} 

//.. 

form-component.js：だから

angular.module('app') 
.component('formComponent', { 
    template:'<template-etc>', 
    controller: Controller, 
    controllerAs: 'ctrl', 
    bindings: { 
    onUpdate: '&', 
    someInput: '<' 
    } 
}); 

function Controller() { 

    var ctrl = this; 
    ctrl.someFormThing = function (value) { 
    ctrl.onUpdate({data: value}) 
} 

} 

フォームでのイベントは、機能ctrl.someFormThing(data)をトリガした場合。これはctrl.onUpdate()を呼び出すことによって親に渡すことができます。