2017-07-16 9 views
0

私の日付ピッカーのディレクティブを作成しようとしていますが、関連するコードです。これは、一度に動作スコープ内の式を評価する

使い方

<date-input open="openCalendar = true"> 
    <input ng-model="ctrl.model.theDate" 
      uib-datepicker-popup="dd-MMMM-yyyy" 
      is-open="openCalendar"> 
</date-input> 

ディレクティブ

angular 
    .module('common.directives') 
    .directive('dateInput', function() { 

     return { 
      restrict: 'E', 
      transclude: true, 
      scope: {open:'&'}, 
      template: 'date-input-template', 
     }; 
    }); 

テンプレート

<script type="text/ng-template" id="date-input-template> 
    <div class="input-group"> 
     <ng-transclude></ng-transclude> 
     <div class="input-group-btn"> 
      <button class="btn btn-default" type="button" ng-click="open()"> 
       <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
     </div> 
    </div> 
</script>  

。 2回目のカレンダーを開こうとすると、日付ピッカーが表示されません。私は間違ったことをしていると確信しています、それが何であるかは分かりません。

ご意見やご指摘をお待ちしております。

答えて

0

ng-clickニーズのためのあなたの式はopenを起動します

ng-click="open()" 

編集:あなたは原型スコープの継承の問題を回避するためにdata.openCalendar = trueのようなオブジェクトを使用する場合、または関数へopenCalendar = true式を移動して起動することができますその機能。

+0

はあなたに感謝式で関数を呼び出す必要があります。私は 'open'を' open() 'に変更しましたが、これは最初のクリックでカレンダーを開くだけです。カレンダーを閉じてもう一度ボタンをクリックすると、カレンダーは表示されません。それは範囲の問題のようです。しかし、私はそれをどのようにデバッグするのが最善かわかりません。 –

+0

@JasonMeckleyプロトタイプスコープ継承の問題を避けるために、または 'openCalendar = true'式を関数に移動してその関数を呼び出すには、' data.openCalendar = true'のようなオブジェクトを 'openCalendar'に使うことができます。 –

0

あなたは

ng-click="open()"> 
+0

ありがとう@sajeetharan。あなたの回答に基づいて質問を更新しました。カレンダーはまだ1回だけ開きます。スコープ変数には問題があると思いますが、デバッグする方法やスコープ間で変数を共有する方法がわかりません –