Angularjs和Jquery日期选择器数据绑定

是！我得到了答案。。

感谢这个示例jsfiddle答案。我发现我不能显示日期的原因是我把它放在了控制器里。

看看这个：

var PRApp = angular.module('PRApp', []);
        PRApp.controller('PRCtrl', ['$scope', '$http', function (scope, http) {
            http.get('GetList').success(function (data) {
                scope.models = data;
                scope.sorting = "-PRDate";
                var i = 0;
                for (i = 0; i < scope.models.length; i++) {
                    scope.models[i].id = i;
                }
            });
            scope.getStatus = http.get('GetStatusList').success(function (status) {
                scope.StatusList = status
            });
            function GetbyDate(fr, t) {
                var from = new Date(t)
            };
            scope.changeDate = function () {
                scope.models = null;
                http.get('GetReportList?from=' + scope.filter_fromDate + '&to=' + scope.filter_toDate).success(
                    function (data) {
                        scope.models = data;
                    });
            }
            scope.jsonDatetotext = function (jsondate) {
                // jsondate format: /Date(#############)/
                // substr(6) will remove '/Date('
                // parseInt will convert remaing string '#############' to int and ignores ')/'
                return new Date(parseInt(jsondate.substr(6)));
            };
        }]);
        PRApp.directive('calendar2', function () {
            return {
                require: 'ngModel',
                link: function (scope, el, el2, attr, ngModel) {
                    attr.$observe("show", function (val) {
                        if (val == 'true') {
                            $(el).datepicker("show");
                        }
                        else {
                            $(el).datepicker("hide");
                        }
                    });
                    attr.$observe("show", function (val) {
                        if (val == 'true') {
                            $(el2).datepicker("show");
                        }
                        else {
                            $(el2).datepicker("hide");
                        }
                    });
                    $(el).datepicker({
                        minDate: '-5Y',
                        dateFormat: 'MM d, yy',
                        onSelect: function (dateText) {
                            scope.$apply(function () {
                                ngModel.$setViewValue(dateText);
                            });
                        }
                    });
                    $(el2).datepicker({
                        minDate: '-5Y',
                        dateFormat: 'MM d, yy',
                        onSelect: function (dateText) {
                            scope.$apply(function () {
                                ngModel.$setViewValue(dateText);
                            });
                        }
                    });
                }
            };
        });

<span class="input-group-addon">
                                    <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span>
                                </span>
                                <input data-show="{{show}}" type="text" name="filter_fromDate" calendar2 data-ng-model="filter_fromDate"
                                    class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" />
                                 </div>
                                                    <br />
                        <div class="input-group">
                                <span class="input-group-addon">
                                    <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span>
                                </span>
                                <input data-show="{{show}}" type="text" name="filter_toDate" calendar2 data-ng-model="filter_toDate"
                                    class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" />
  
       
                             </div>   
                           <br />
                             <input type="submit" class="btn btn-primary btn-sm" value="GO" />
                        </div>

像这样的代码应该始终进入指令的链接函数。 $(document).ready(function () {/**/} ^--你根本不应该使用这个。

一种方法可能是：

angular
  .module('app', [])
  .directive('thirdparty', jQueryDirective)
function jQueryDirective(){
  return {
    restrict: 'E',
    template: '<div id="foo"></div>',
    link: function(scope, element, attrs){
      $(element).append('appended with jquery')
    }
  }
}
angular.bootstrap(document, ['app'])

#foo {
  width: 100px;
  height: 100px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<thirdparty/>