How to make Clockface work in AngularJS?

Question

Regular Expressions

Good day, dear developers!
Help make money on Angular this wonderful plugin for jquery . This is timepicker Clockface. I found a piece of code , but it doesn't work. There is a directive

.directive('clockface', function() {
            return {
                restrict: 'A',
                require : 'ngModel',
                link: function(scope, element, attrs, ngModelCtrl) {
                    element.clockface({
                        format: 'HH:mm'
                    }).on('pick.clockface', function(e, data) {
                        var hr=data.hour?("0" +data.hour).slice (-2):'00';
                        var mn=data.minute?("0" +data.minute).slice (-2):'00';
                        ngModelCtrl.$setViewValue(hr+':'+mn);
                        scope.$apply();
                    });
                }
            };
        });

HTML code:

<input type="text"  data-format="HH:mm" class="form-control clockface" clockface ng-model="to_time"/>

But there, at least something works for the author of the question, but it doesn’t close, it doesn’t work for me at all. I ask for help, help to make a working version.

Answer 1

You need a positive lookbehind, and you have a negative lookahead - that is, it says "that minus after which there is no parenthesis"
(?<=\()\-
https://docs.microsoft.com/en-us/dotnet/standard/b ...

Answer 2

It turns out that everything works if you use the specified code, the plugin uses bootstrap's CSS, so you need to add the .dropdown -menu class to clockface.css

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

I copied everything as in bootstrap.