AngularJSとBootstrap DatePickerディレクティブの使用例？

Question

さまざまなgithubディレクティブの例を見てきましたが、動作するJSFiddleは含まれていませんでしたが、そのいずれも動作させることができませんでした。この点は驚いてAngular-UIにはありません。

Answer 1

これはあなたのview.htmlであるとしましょう：

あなたcontroller.jsで

 <script type="text/javascript" src="js/bootstrap-datepicker.js"></script> 
     <div id="datepicker"></div> 
     <script type="text/javascript"> 
     $('#datepicker').datepicker().on('changeDate', function(ev){ 
      var element = angular.element($('#datepicker')); 
      var controller = element.controller(); 
      var scope = element.scope(); 

      scope.$apply(function(){ 
      scope.doSomethingWithDate(ev.date); 
      }); 
     }); 
     </script> 

そして：

$scope.doSomethingWithDate = function (date){ 
    alert(date); 
}; 

ことだ。つまり、それは動作します:)

Answer 2

これを参照してください。指令、作業カレンダーfiddle： http://jsfiddle.net/nabeezy/HB7LU/209/

myApp.directive('calendar', function() { 
      return { 
       require: 'ngModel', 
       link: function (scope, el, attr, ngModel) { 
        $(el).datepicker({ 
         dateFormat: 'yy-mm-dd', 
         onSelect: function (dateText) { 
          scope.$apply(function() { 
           ngModel.$setViewValue(dateText); 
          }); 
         } 
        }); 
       } 
      }; 
     }) 

Answer 3

私は簡単な例を探していましたが、見つけられませんでしたが、コードとリンクがいっぱいで、それをきれいにしました。ここでは、角度を使ったdatepickerブートストラップ：

--->sample page < ---

Answer 4

今確認してください。 jqueryとcssを追加しています。ここ

Fiddle here