在Angular js的控制器中绑定Twitter Bootstrap datepicker的模型值答案

【问题标题】：binding the model value of Twitter Bootstrap datepicker in controller in Angular js在Angular js的控制器中绑定Twitter Bootstrap datepicker的模型值
【发布时间】：2014-01-28 05:13:14
【问题描述】：

我正在使用 Angular.js 和 Twitter Bootstrap 构建一个应用程序。

HTML：

 <div ng-controller="myController"> 
 <label for="event">Event</label>
 <input type="text" ng-model="event"/>
 <label for="eventdate">Date</label>
 <div class="input-append date" id="datepicker" data-date-format="dd-mm-yyyy">
 <input class="span2" size="20" type="text" id="datepicker" ng-model="eventdate" required>
 <span class="add-on"><i class="icon-th"></i></span>
 <input class="btn-primary" type="submit" id="submit" value="Submit" ng-click="submit()" />
 </div>

控制器：

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController', function($scope) {
$('#datepicker').datepicker();
$scope.submit = function () {
console.log($scope.event);
console.log($scope.eventdate);
};
});

当我点击“提交”按钮时，

console.log($scope.event); 打印在事件文本框中输入的数据。

但是当我从日期选择器中选择一个日期时，console.log($scope.eventdate); 会打印“未定义”

可能是什么原因？

请指教。

【问题讨论】：

标签： angularjs twitter-bootstrap datepicker

【解决方案1】：

您的引导日期选择器是 angular 之外的第三个组件。当您从日期选择器更改日期时，角度不知道更改。

你必须像这样编写一个自定义指令：

app.directive('datepicker', function() {
    return {

      restrict: 'A',
      // Always use along with an ng-model
      require: '?ngModel',

      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return;

        ngModel.$render = function() { //This will update the view with your model in case your model is changed by another code.
           element.datepicker('update', ngModel.$viewValue || '');
        };

        element.datepicker().on("changeDate",function(event){
            scope.$apply(function() {
               ngModel.$setViewValue(event.date);//This will update the model property bound to your ng-model whenever the datepicker's date changes.
            });
        });
      }
    };
});

将指令应用于 html：

<div class="input-append date" datepicker ng-model="eventdate" data-date-format="dd-mm-yyyy">
     <input class="span2" size="20" type="text" required="" />
     <span class="add-on">
        <i class="icon-th"></i>
     </span>
 </div>

DEMO

【讨论】：