Angularjs datetimepicker不能在部分html视图上工作

我想在我的Angularjs项目中使用这个jQuery Plugin Date and Time Picker来从窗体中的用户接收日期。Angularjs datetimepicker不能在部分html视图上工作

<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>

因此，当我点击窗体时，日期时间窗口小部件显得非常好。在这一点上，我没有使用任何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){ 

}]);

根据我的路线，当我在URL中获取/datetime，呈现date.html部分;下面是date.html部分代码：

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

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

我创建了一个自定义的指令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>

在这一点上，我有信心它会工作，但它没有。

我在做什么错？有没有更好的方法来做到这一点？感谢您的帮助。

来源

2016-11-17 Awa Melvine

从我记得，你不能使用Angular和JQuery，我错了吗？ – trichetriche

@ trichetriche：那是不正确的 – epitka

如果您需要，您可以使用它。有一个叫做jqlite的角度包装器，如果你使用jquery，你应该在指令中做，因为它修改了dom –

很难说究竟出了什么问题，因为在这里似乎有多次迭代你的代码，而且不清楚它们随着时间的推移如何变化。话虽如此，没有理由这不应该工作 - 它对我来说工作正常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() { 
});

来源

2016-11-17 14:36:55

我找到了解决方案。这是我的一个愚蠢的错误。为了测试的目的，我重复了输入字段''所以我在同一页上有两个'id's，这就是为什么它没有工作。我删除了一个'id's，现在它正在工作。非常感谢您的贡献。 –

Angularjs datetimepicker不能在部分html视图上工作

回答

相关问题