javascript - 日期选择器未使用 Angular JS 进行清理

Question

提交表单后，我将所有输入字段重置为空白，得到了 HTML。但是，仅日期选择器没有被清理。

HTML 代码

  <div>
                      <form name="profileform" role="form"> 
                          <div class="form-group">
                          <h4 class="mzero">Details</h4>
                          </div>
                          <div class="form-group">                             
                          <input type="text" placeholder="name"  name="name" ng-model="personal.name">                            
                          </div>
                          <div class="form-group input-daterange input-group col-xs-12" id="datepicker">                                  
                          <input value="" class="form-control input-sm" placeholder="dob" name="dob" ng-model="personal.dob">                             
                          </div>
                          <div class="form-group"> 
                          <textarea  rows="2" placeholder="Write about you..." name="description" ng-model="personal.description" ></textarea>
                          </div>
                      </form>
              </div>

 <button type="button" ng-click="createChallenge()">Create</button> 

   </div>
              <script type="text/javascript">
  $(function(){
    $('.input-daterange').datepicker({  
         startDate: "today" 
    }); 
  });

JS代码

$scope.createChallenge = function(){
// persist in db logic 
 resetForm();     
}

 var resetForm = function(){
           $scope.master={};
               $scope.profile= angular.copy($scope.master);     
            $scope.profileform.$setPristine();

                  };

所有输入字段均已重置，但在日期选择器窗口中，先前选择的日期仍然存在。我想澄清这一点。

Answer 1

正如评论者所说，您应该为日期选择器创建一个指令。

    var datePicker = function(){
        return {
            restrict: 'AE',
            link: function(scope, element) {

                element.datepicker({
                    startDate: "today"
                });

            }
        }
    };

angular.module('your_module_name')
    .directive('datePicker', datePicker);

然后在您的 html 中使用此指令

<div class="form-group input-daterange input-group col-xs-12">                                  
  <input date-picker value="" class="form-control input-sm" placeholder="dob" name="dob" ng-model="personal.dob">                             
</div>

编辑

已创建工作示例 plunker .