Question

我是angularjs的新手，我在这里为日期选择器创建了一些样本，它运行正常。我想为这个样本创建一个指令..我尝试了它的工作但是在选择了它显示格式的日期后没有定义... 对于这个样本我需要一个指令..任何一个帮助我... 感谢

var app = angular.module('myapp', ['ng-bootstrap-datepicker']);
app.controller('AppCtrl', function ($scope) {
$scope.datepickerOptions = {
                    format: 'yyyy-mm-dd',
                    language: 'en',
                    autoclose: true,
                    weekStart: 0
                };
  
  $scope.date = '2000-03-12'
});
var appboot = angular.bootstrap(document, ['myapp']);

<link href="https://rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>



<div ng-app="myapp" ng-controller="AppCtrl">
            <input id="datepicker" type="text" data-ng-datepicker data-ng-options="datepickerOptions" data-ng-model="date">
            <input id="datepickerMirror" type="text" data-ng-model="date">
</div>

Answer 1

如果您可以使用more modern datepicker（以及它对新AngularJS和Bootstrap的依赖性），下面是一个名为my-datepicker的非常简单的指令示例，它只需{{1} }}作为其模型并包装date功能。

uib-datepicker-popup

angular.module('myApp', ['ui.bootstrap'])

.directive('myDatepicker', function() {
  return {
    restrict: 'E',
    scope: {
      date: '='
    },
    templateUrl: 'partials/my-datepicker.html',
    link: function(scope, element, attrs) {
      scope.status = {
        opened: false
      };

      scope.open = function(event) {
        scope.status.opened = true;
      };
    }
  };
})

.controller('AppCtrl', ['$scope', function ($scope) {
  $scope.date = '2000-03-12';
}]);

.input-group {
  width: 200px;
}

请注意，传递到您的指令中的<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> <div ng-app="myApp" ng-controller="AppCtrl"> <script type="text/ng-template" id="partials/my-datepicker.html"> <div class="input-group"> <input class="form-control" type="text" uib-datepicker-popup ng-model="date" is-open="status.opened"> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"> <span class="glyphicon glyphicon-calendar"></span> </button> </span> </div> </script> <div class="container"> <my-datepicker date="date"></my-datepicker> </div> <input id="datepickerMirror" type="text" ng-model="date"> </div>模型将用作实际date的{{1}};你可以通过指令选择一个日期并看到另一个ng-model（你的指令之外）得到更新来确认这一点。

您也可以将指令的模板（uib-datepicker-popup）移动到自己的文件中，而不是将其嵌入input。

编辑＃2

根据要求，下面是使用partials/my-datepicker.html指令的示例。请注意使用text/ng-template代替ng-bootstrap-datepicker来设置controller: ...模型;这是为了确保在链接发生时（即初始化实际link: ...指令时）可以更新指令范围：

datepickerOptions

ng-bootstrap-datepicker

angular.module('myapp', ['ng-bootstrap-datepicker']) .directive('myDatepicker', function() { return { restrict: 'E', template: '<input type="text" ng-datepicker ng-options="datepickerOptions" ng-model="date">', scope: { date: '=' }, controller: function($scope) { $scope.datepickerOptions = { format: 'yyyy-mm-dd', language: 'en', autoclose: true, weekStart: 0 }; } }; }) .controller('AppCtrl', ['$scope', function ($scope) { $scope.date = '2000-03-12' }]); angular.bootstrap(document, ['myapp']);指令看起来与最新的AngularJS / Bootstrap版本不兼容，因此上面的示例使用OP的代码片段中的相同内容。

如何为这个日期选择器示例创建指令？

1 个答案:

编辑＃2