angular directive - Angularjs datetimepicker not working on partial html view -
i trying use jquery plugin date , time picker in angularjs project receive date user in form.
<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> so, when click on form, datetime widget appears quite alright. @ point have not used angularjs.
now want angularjs , attempt i've far made:
<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> here app.js file:
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){ }]); according routes, when /datetime in url, date.html partial rendered; here code date.html partial:
<div ng-controller="datetimecontroller"> <input type="text" id="datetimepicker" class="form-control"> </div> when did this, expected date/time widget appear didn't. began searching solutions. best solution found suggested use angular directives. according solution, made following changes:
i created custom directive date-time , here code in app.js file:
// ... myapp.directive('datetime', function () { return { template:'<input type="text" id="datetimepicker" class="form-control">', restrict: 'e', link: function (scope, element, attr) { $('#datetimepicker').datetimepicker(); } }; }); and date.html partial looked this:
<div ng-controller="datetimecontroller"> <date-time></date-time> </div> at point confident work didn't.
what doing wrong? there better way of doing this? help.
hard wrong because there seem multiple iterations of code here, , it's not clear how of them have changed on time. having said that, there's no reason shouldn't work-- it's working fine me in plunker. should able take , see you're doing differently.
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() { });
Comments
Post a Comment