Question

我正在尝试在Angularjs项目中使用此jQuery Plugin Date and Time Picker来从表单中的用户接收日期。

<html>
<head>
    <title>Datetime picker</title>
    <link href="bootstrap.min.css" rel="stylesheet" >
    <link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>

    <div class="container">
        <form>
           <input type="text" id="datetimepicker" class="form-control">
        </form>
    </div>

    <script src="jquery-3.1.1.min.js" ></script>
    <script src="bootstrap.min.js"></script>
    <script src="jquery.datetimepicker.full.js"></script>

</body>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker();
</script>
</html>

因此，当我单击表单时，datetime小部件显示正常。此时我还没有使用任何Angularjs。

现在我想用Angularjs做这个，这是我迄今为止所做的尝试：

<html ng-app="myApp">
<head>
    <title>Datetime picker</title>
    <link href="bootstrap.min.css" rel="stylesheet" >
    <link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>

    <div class="container" ng-view></div>

    <script src="angular.min.js" ></script>
    <script src="ngRoute.js" ></script>
    <script src="app.js" ></script>
    <script src="jquery-3.1.1.min.js" ></script>
    <script src="bootstrap.min.js"></script>
    <script src="jquery.datetimepicker.full.js"></script>

</body>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker();
</script>
</html>

这是我的app.js文件：

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider){
    $routeProvider
        .when('/datetime', {
            templateUrl: 'admin/date.html',
            controller:  'DateTimeController'
        })
        .otherwise({
            redirectTo: "/"
        });
});

myApp.controller('DateTimeController', ["$scope", function($scope){

}]);

根据我的路线，当我在网址中获得/datetime时，会显示date.html partial;以下是date.html partial的代码：

<div ng-controller="DateTimeController">
    <input type="text" id="datetimepicker" class="form-control">
</div>

当我这样做时，我预计会出现日期/时间小部件，但事实并非如此。所以我开始寻找解决方案。 best solution I found建议我使用angular指令。根据这个解决方案，我做了以下更改：

我创建了一个自定义指令date-time，这是我app.js文件中的代码：

// ...

myApp.directive('dateTime', function () {
   return {
    template:'<input type="text" id="datetimepicker" class="form-control">',
    restrict: 'E',
    link: function (scope, element, attr) {
       $('#datetimepicker').datetimepicker();
    }
  };
});

并且date.html部分现在看起来像这样：

<div ng-controller="DateTimeController">
    <date-time></date-time>
</div>

此时我确信它会起作用，但事实并非如此。

我做错了什么？有没有更好的方法呢？谢谢你的帮助。

Answer 1

很难确切地说出错是什么，因为这里似乎有多次代码迭代，并且不清楚它们是如何随着时间的推移而发生变化的。话虽如此，没有理由不这样做 - 它对我来说很好in this Plunker。你应该能够看一看，看看你做的不同。

var app = angular.module('plunker', ["ngRoute"]);

app.config(function($routeProvider){
    $routeProvider
        .when('/datetime', {
            templateUrl: 'date.html',
            controller:  'DateTimeController'
        })
        .otherwise({
            redirectTo: "/"
        });
});

app.directive('dateTime', function () {
   return {
    template:'<input type="text" id="datetimepicker" class="form-control">',
    restrict: 'E',
    link: function (scope, element, attr) {
       $('#datetimepicker').datetimepicker();
    }
  };
});

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.controller('DateTimeController', function() {
});

Angularjs datetimepicker不能处理部分html视图

1 个答案: