Question

我正在尝试使用如下所示的自定义指令获取angular bootstrap datetimepicker输入值。我能够获得指令中的值。如何在角度控制器中访问此指令范围值。

HTML

App.directive('datetimez', function(){
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function(scope, element, attrs, ngModel){
            if(!ngModel) return;  
            ngModel.$render = function(){
                element.find('#datetimepickerId').val( ngModel.$viewValue || '' );
            };
            element.datetimepicker({ 
                format : 'YYYY-MM-DD HH:mm:ss'
            });
            element.on('dp.change', function(){
                scope.$apply(read);
            });
            read();
            function read() {
                var value = element.find('#datetimepickerId').val();
                ngModel.$setViewValue(value);
                console.log(scope.dueDate);
            }
        }
    };
});

App.controller('myController', ['$scope', function($scope) {
    console.log($scope.dueDate);
}]);

控制器

{{1}}

成功登录指令打印值。但登录控制器不会。

Answer 1

你走了。

我检查了bootstrap datetimepicker的文档，并了解有两个实现。

一个带有图标的点击并显示datetimepicker
另一个只有一个没有图标的文本框

对于第一个，您必须使用父div来启动插件，对于第二个选项，您必须使用文本框来启动插件

您使用了第二个选项，但使用了父div来使用directive启动插件。

此外，div元素不支持ngModel，因此指令应与input元素一起使用。

我扩展了您的指令以处理这两种情况，并且日期格式和其他选项可以从controller传递。

您可以尝试使用以下工作代码段。

var App = angular.module('App', []);

App.directive('datetimez', function(){
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function(scope, element, attrs, ngModel){
            if(!ngModel) return;  
          
            ngModel.$render = function(){
                element.val( ngModel.$viewValue || '' );
            };
          
            function read() {
                var value = element.val();
                ngModel.$setViewValue(value);
                //console.log(scope.dueDate);
            }
            
            var options = scope.$eval(attrs.datetimez) || {};
            if(element.next().is('.input-group-addon')) {
              var parentElm = $(element).parent();
              parentElm.datetimepicker(options);
          
              parentElm.on('dp.change', function(){
                 scope.$apply(read);
              });
            } else {
              element.datetimepicker(options);
          
              element.on('dp.change', function(){
                 scope.$apply(read);
              });
            }
          
            read();
        }
    };
});

App.controller('myController', ['$scope', function($scope) {
  
    $scope.datePickerOptions = { 
       format : 'YYYY-MM-DD HH:mm:ss'
    };
    
    $scope.$watch('dueDate1', function(){
      console.log($scope.dueDate1);
    });
  
    $scope.$watch('dueDate2', function(){
      console.log($scope.dueDate2);
    });
}]);

angular.bootstrap(document, ['App']);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div class="container" ng-controller="myController">
    
    <div class="row">
        <div class='col-md-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" datetimez="datePickerOptions" ng-model="dueDate1" />
                </div>
            </div>
        </div>
    </div>
  
    <div class="row">
        <div class='col-md-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" datetimez="datePickerOptions" ng-model="dueDate2" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

使用AngularJS引导DateTimePicker：将指令ngModel值传递给控制器

1 个答案: