AngularJS和Bootstrap DatePicker指令的工作示例？

Question

我已经看过各种各样的github指令示例,但没有一个包含一个正在运行的JSFiddle,我也无法让它们中的任何一个工作.令人惊讶的是,目前还不在Angular-UI中.

Answer 1

请看这个指令,一个工作日历小提琴: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 2

让我们说这是在你的view.html:

        <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>

然后在你的controller.js中:

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

就是这样,它有效:)