Angularjs bootstrap datetimepiker 未绑定模型

Question

我在 MVC 项目中使用带有对象属性的 AngularJS 指令时遇到一点问题。整体结构是一个 .cshtml 页面，其中包含对脚本文件的引用，其中包含应用程序、控制器和指令的定义。一切正常，对所有对象和变量的访问都非常正常，控制台上没有显示任何错误。

这是我的设置，首先是指令：

var app = angular.module("dataContainer", ['ngMaterial']);
app.directive('dateTime', function () {
    return {
        template: '<input type="text" id="datetimepicker" class="form-control">',
        restrict: 'E',
        require: 'ngModel',
        scope: {},
        link: function (scope, element, attr) {
            $('#datetimepicker').datetimepicker({
                format: 'DD/MM/YYYY'
            });
        }
    };
});

首先，我尝试将此值绑定到 $scope 变量中，但没有成功，这是控制器的一部分：

app.controller("InvoiceDetailController", function ($scope, $http) {
    $scope.dateValue = "";
    ...

之后，我插入了 html 标签，如下所示：

<date-time ng-model="dateValue"></date-time>

但是当我触发 ng-click 上的操作以保存信息时，$scope.dateValue 始终是一个空字符串，就像它无法正确绑定到 div 一样。我也尝试从指令中删除范围属性，将其更改为 true 和 false，但没有任何效果。这是一个可访问性问题（可能与日期选择器有关）？在 AngularJS 中是否有更好的方法将变量绑定到指令？谢谢大家的帮助！

Answer 1

您已经需要 ngModel，您需要使用它。请参阅 this 答案。

此外，您不能设置输入id，因为同一页面中可能有很多输入。相反，find 指令元素内的输入并在其上调用插件。

var app = angular.module("app", []);
app.controller('controller', function($scope) {
  $scope.dateValue = new Date();
  $scope.foo = 'bar';
});
app.directive('dateTime', function () {
  return {
    template: '<input type="text" class="form-control">',
    restrict: 'E',
    require: 'ngModel',
    scope: {},
    link: function (scope, element, attr, ngModel) {
      const input = element.find('input');
      input.datetimepicker({
        onChangeDateTime: function(date) {
          scope.$apply(function() {
            ngModel.$setViewValue(date);
          });
        }
      });
      
      ngModel.$render = function() {
        input.val(ngModel.$modelValue);
      }
    }
  };
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <date-time ng-model="dateValue"></date-time>
  {{dateValue}}
</div>

Angularjs bootstrap datetimepiker 未绑定模型

Angularjs bootstrap datetimepiker not bind model

html

javascript

angularjs