Sanketh Sanketh - 4 months ago 105
AngularJS Question

Error : node is undefined bootstrap timepicker

I am using bootstrap timepicker in my angular js application where i have used routes (ngRoute)

In one page i am using the bootstrap timepicker and it works fine without any error. But the same when i use in a popup, (ui-bootstrap), i receive the following error.

Error: node is undefined
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8462:13
publicLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8339:30
lazyCompilation@http://localhost:7084/Scripts/lib/angular/angular.js:8677:16
boundTranscludeFn@http://localhost:7084/Scripts/lib/angular/angular.js:8476:16
controllersBoundTransclude@http://localhost:7084/Scripts/lib/angular/angular.js:9206:20
.link@http://localhost:7084/Scripts/lib/bootstrap/ui-bootstrap-tpls.js:3678:9
bind/<@http://localhost:7084/Scripts/lib/angular/angular.js:1266:15
invokeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:9757:9
nodeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:9156:11
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8459:13
nodeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:9151:24
compositeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:8459:13
nodeLinkFn@http://localhost:7084/Scripts/lib/angular/angular.js:9151:24
compileTemplateUrl/<@http://localhost:7084/Scripts/lib/angular/angular.js:9496:13
processQueue@http://localhost:7084/Scripts/lib/angular/angular.js:16104:28
scheduleProcessQueue/<@http://localhost:7084/Scripts/lib/angular/angular.js:16120:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:7084/Scripts/lib/angular/angular.js:17378:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:7084/Scripts/lib/angular/angular.js:17191:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:7084/Scripts/lib/angular/angular.js:17486:13
done@http://localhost:7084/Scripts/lib/angular/angular.js:11637:36
completeRequest@http://localhost:7084/Scripts/lib/angular/angular.js:11843:7
requestLoaded@http://localhost:7084/Scripts/lib/angular/angular.js:11776:9
<div class="modal-content" uib-modal-transclude="">


cshtml

<div class="bootstrap-timepicker">
<div class="form-group">
<div class="input-group">
<input type="text" id="txtTime" class="form-control timepicker">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
</div>
</div>
</div>


javascript

$(function () {
$(".timepicker").timepicker({ showInputs: false });
});


Modal popup code

$uibModal.open({
animation: true,
templateUrl: /Controller/Action,
controllerAs: somename,
controller: somecontroller,
backdrop: static,
keyboard: true,
size: null

});


The timepicker does work in thr poup but in the console i see this error.
How do i solve it?

Answer

Try this:

<div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small">
            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>

And javascript

 $(function () {
$("#timepicker1").timepicker({ showInputs: false });       
 });
Comments