CODEWITHSUNDEEP
angularjsangularjs-directive
Nick
Nick

Reputation: 14283

angularjs - unable to use timepicker plugin as a directive

I'm trying to use this plugin (https://github.com/kachurun/timepicker) inside my angularjs application.

I'm trying to create a directive restricted to an Attribute, but the dial for selecting a time doesn't come up.

Here's the directive code:

angular.module('myTimePicker', []).directive('timePicker', function() {
  var linkFunction;
  linkFunction = function($scope, el, attrs) {
    console.log("Scope: ", $scope);
    console.log("El: ", el);
    return console.log("Attrs: ", attrs);
  };
  return {
    restrict: 'A',
    link: linkFunction
  };
});

Quite simple for now, I just wanted to try it out to see if it works.

In my html, I'm calling this like following:

<span class="edit-time-label">
    From: <input style="background:red;" type="text" time-picker position="bottom" />
</span>

Again, really simple code.

The problem is that it is not displayed!

element in console.log is printed as input:

enter image description here

But no dial is displayed.

According to the documentation, it needs to be an input type="text" and it is.

Any suggestion?

EDIT:

here's a pen that replicates this issue: http://codepen.io/NickHG/pen/GZaROV?editors=1010

Upvotes: 2

Views: 74

Answers (1)

Chathura Hettiarachchi
Chathura Hettiarachchi

Reputation: 131

Here timepicker example but there is some issue with CSS

HTML

    <!DOCTYPE html>
<html>

  <head>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
     <script src="script.js"></script>
    <script src="time.js"></script>
     <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div ng-app="ionicApp">
    <div ng-controller="appCtrl">
      <h1 class="title">Time Picker</h1>
    </div>
    <div>
      <span class="edit-time-label">
        From: <input type="text" time-picker position="bottom" />
      </span>
    </div>
  </div>
  </body>

</html>

angular part

    (function(window){
    angular.module('ionicApp', [])

    .controller('appCtrl', function($scope) {

    })
    .directive('timePicker', function() {
      var linkFunction;
      linkFunction = function(scope,element, attr) {
        console.log($(element));
        console.log("El");

        //return console.log("Attrs: ");

 //here the part integrate with the plugin     


$(element).timePicker({'time':'07:30','position':'left','float':'bottom','autohide':true});
          };
          return {
            restrict: 'A',
            link: linkFunction
          };
        });
    })(window);

Upvotes: 1

Related Questions