2016-07-13 3 views
0

angularstrap popoversを使用して、日付/時刻ピッカーを公開する単純なポップオーバーを作成しています。ここで親コントローラのスコープを更新するために、角トラップポップオーバーディレクティブの内部スコープを強制的に変更するにはどうすればよいですか?

ポップオーバー自体

<div class= "form-group form-group-sm">                                           
    <button type= "button" class= "btn" id= "start-select-btn"                                     
     data-placement= "bottom"                                            
     data-template= "/static/partials/popover/start.html"                                     
     data-auto-close= "true"                                                                                         
     bs-popover                                                
    >                                                   
     Start <span class= "caret"></span>                                          
    </button>                                                 
</div> 
<button ng-click= "check()"></button> 

そして、ここではそれがで引っ張っているテンプレートです。(start.htmlここ)

<div class= "popover" id= "start-menu">                                            
    <div class= "arrow"></div>                                              
    <div class= "popover-content">                                             
     <input type= "text" class= "form-control" uib-datepicker-popup ng-model= "startDate"/>                            
     <uib-timepicker ng-model= "startTime"></uib-timepicker> 
    </div>                                    
</div>                                                   

だから、基本的に、あなたが何かをクリック日付ピッカー/時間ピッカーが降下します。私が理解できないように見えるのは、私の$スコープがdatepickerの値で更新されていない理由です。ここに私が意味することは...

落ちる日付ピッカー内の何かを変更するとします。次に、私のコントローラ内で定義された "チェック()"メソッドをクリックします。

$scope.check = function() { 
    alert($scope.startDate); 
} 

これは私が最初にstartDateを設定したものを警告します。入力フィールドの値を変更しても、startDateのスコープ値は変更されません。さらに、ポップオーバーを閉じてから再び開くと、値は初期値にリセットされます。

私にとって、これは親の範囲を変更しないこのポップオーバー指示の内部範囲の問題のようです。

私はテンプレートを少し更新

<div class= "popover" id= "start-menu">                                            
<div class= "arrow"></div>                                              
<div class= "popover-content">                                             
    <input type= "text" class= "form-control" uib-datepicker-popup ng-model= "$parent.startDate"/>                            
    <uib-timepicker ng-model= "$parent.startTime"></uib-timepicker> 
</div>                                    

を試してみましたNG-モデルではなく、単に "たstartDate" の今 "$ parent.startDate" です。

これは少しマイナスの効果があるようです。私がポップオーバーを閉じると、以前に入力された値がdatepickerに残るようになりました。

しかし、前回から "check()"関数を実行すると、警告された値($ scope.startDate)は変更されません。

この問題は、popoverのテンプレートの中に入れようとする前に、私が意図している方法でスコープと一緒に働いたので、poppover自体ではなく、datepicker/timepickerではないと思います。

このように、このポップオーバーの内部スコープをコントローラの親スコープに正確に反映させるにはどうすればよいですか?

編集:私はこの

... 
bs-popover= "startScope" 
... 

のように「BS-ポップオーバー」属性にスコープを渡してみました、その後、私のコントローラ内部の

$scope.startScope = { 
    startDate : $scope.startDate 
}; 

を私がクリックしたときにこれが...動作しませんでした私のチェッカーボタンをテストすると、警告された値は、最初は親スコープから継承されたものであった。

+0

あなたは問題のある実行可能なスニペットを作成してください。 – fracz

+0

悲しいことに私はできません。ファイアウォールの背後にある。 – Zack

+0

私はJSFiddleやそのようなものを意味していました:-) – fracz

答えて

0

このようなことをして、私はこれを回避しました。

$scope.start = { 
    startDate : $scope.startDate, 
    startTime : $scope.startTime 
} 

そしてテンプレートに

ng-model = "$parent.start.startDate" 

が、これは働いていた理由として偉大な説明を持っていないが、this postthis postが約束の地に私を導きました。

関連する問題