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

我试图使用如下所示的自定义指令获取角度引导datetimepicker输入值。我能够得到指令中的值。如何在angular controller中访问此指令范围值

HTML

指令内的日志成功打印值。但控制器内部的日志不会。给你

我查看了

bootstrap datetimepicker

的文档，了解到有两个实现

一个带有图标，可单击并显示

datetimepicker

另一个是没有图标的文本框

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

您已经使用了第二个选项，但是使用了父div来启动带有

指令的插件

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

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

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


var-App=angular.module（'App'，[]）；
App.directive（'datetimez'，function（）{
返回{
要求：“？ngModel”，
限制：“A”，
链接：功能（范围、元素、属性、模型）{
如果（！ngModel）返回；
ngModel.$render=function（）{
element.val（ngModel.$viewValue | |“”）；
};
函数read（）{
var value=element.val（）；
ngModel.$setViewValue（值）；
//console.log（scope.dueDate）；
}
var options=scope.$eval（attrs.datetimez）|{}；
if（element.next（）.is（'.input group addon'））{
var parentElm=$（元素）.parent（）；
parentElm.datetimepicker（选项）；
parentElm.on（'dp.change'，function（））{
适用范围：$apply（读取）；
});
}否则{
元素。日期时间选择器（选项）；
on（'dp.change'，function（）{
适用范围：$apply（读取）；
});
}
read（）；
}
};
});
App.controller（'myController'，['$scope'，函数（$scope）{
$scope.datePickerOptions={
格式：“YYYY-MM-DD HH:MM:ss”
};
$scope.$watch（'dueDate1'，function（）{
console.log（$scope.dueDate1）；
});
$scope.$watch（'dueDate2'，function（）{
console.log（$scope.dueDate2）；
});
}]);
引导（文档，['App']）

在js
$scope.dueDate
的第20行，忘记了$symbol。如果我这样做，它会说$scope没有定义
datetimez ng model=“dueDate”
为什么要在div中使用这个标记而不是在input中使用？是控制器、指令的控制器，还是仅仅是一个页面（不相关）控制器？初始化控制器时，$scope.dueDate中没有值。在输入和控制台中添加一个名为日期更改的函数中的ng更改。感谢您的精彩帖子。将立即检查并很快返回。我使用了此元素，但未发生函数错误。
    <div class='input-group date'  id='datetimepickerId' datetimez ng-model="dueDate" >
          <input type='text'  class="form-control" />
    </div>

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);
}]);