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視圖上工作

回答

相關問題