コントローラのスコーププロパティをカスタムディレクティブに渡すにはどうしたらいいですか？

Question

基本設定：

私はそれの内部でカスタムディレクティブ（子要素）を持つモーダルフォームを持っています。カスタムディレクティブはボタンです。モーダルは入力チェックボックスで構成されています。

最終目標：

チェックボックスがカスタム指令/ボタン要素を有効にする必要があり、「確認」されるたびに。チェックボックスがオフの場合、カスタムディレクティブ/ボタンは無効にする必要があります。私はこれまでAKA私の思考プロセスを持って何

：「modalController」は、

私は、動的変数（にisChecked）の値を変更するには、チェックボックスの入力にNG-モデルを置きます。入力がチェックされると、$ scope.isChecked値はtrueに設定されます。チェックされていない場合、$ scope.isCheckedはfalseです。

ボタンを無効にするには、modalControllerからカスタムディレクティブに 'isChecked'の値を渡します。カスタムディレクティブの値は、ディレクティブテンプレート内にあるボタンのng-checked式に置くことができます）。

問題

私はこのソリューションをしようとすると、コンソールログは「inputCheckが定義されていません」というエラーが表示されます。これは、ページがロードされるとすぐに発生するため、ユーザーがチェックボックスをクリックする前にコンソールログが印刷されます。どのようにこの作品を作るためのアイデアですか？

モーダルHTML：

<div ng-controller= "modalController"> 
    <input type="checkbox" ng-model="isChecked"> 
    <button-directive inputCheck="isChecked"></button-directive> 
    </div> 

ButtonDirective.js：

angular.module('starter').directive('buttonDirective', function ($uibModal) { 
    return { 
     restrict: "EA", 
     templateUrl: "app/directives/button-directive.html", 
     scope: { 
      inputCheck: "@"  
     }, 
     controller: ['$scope', function ($scope) { 
        console.log(inputCheck); 
     }] 
    }; 
}); 

ボタン-directive.html：

<button ng-checked="inputCheck"> 

Answer 1

はあなたがやった方法を作業を参照してくださいになります。

あなたは属性間違って渡した、angularjsが悪いことを持っているIMOそれはあなたがそのinputCheckのようなディレクティブに値を渡しているとき、それはinput-check

<button-directive input-check="isChecked"></button-directive> 

にする必要があるので、あなたはhiphenと異なるそれを書く必要がありますそして、あなたのスコープの宣言は、あなたが以下の変更を行う必要があり

scope: { 
    inputCheck: "="  
}, 

https://plnkr.co/edit/5jlHaE0fvhoDPi2h8XGq?p=preview

Answer 2

あなたは間違ってそれをやっています。 $ scope変数は、その指令スコープ宣言とは異なります。

ディレクティブを含むすべての子は、$ scopeスコープ内にありますか？

したがって、ディレクティブ宣言にはそのスコープは不要です。削除してください。

angular.module('starter').directive('buttonDirective', function ($uibModal) { 
    return { 
     restrict: "EA", 
     templateUrl: "app/directives/button-directive.html" 
    }; 
}); 

あなたのモーダルは、あなたのinputCheck属性を渡す必要はありません。

<div ng-controller= "modalController"> 
    <input type="checkbox" ng-model="isChecked"> 
    <button-directive></button-directive> 
    </div> 

その後、あなたのディレクティブのhtmlは

<button ng-checked="isChecked"> 

この

https://plnkr.co/edit/icaufi3LJxTnbTOkmxdb

Answer 3

等号を使用する必要があります。

<button-directive input-check="isChecked"></button-directive> 

scope: { 
    inputCheck: "="  
} 

<button ng-disabled="inputCheck">