angularjstwitter-bootstraptimepickermodalpopup

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?


Solution

  • 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 });       
     });