угловой (jquery timepicker) не может обнаружить изменения

Question

Im новый для углового и при выполнении небольшого упражнения я был поражен и Я хотел включить ng-show в зависимости от предыдущих таймингов и ввода времени через jquery timepicker, но мой угловатый не может прочитать значение timepicker показать следующей строке

Мой код показан ниже

<table class="table table-bordered"> 
    <thead> 
    <tr> 
     <th>Time From</th> 
     <th>Time To</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <input type="text" ng-model="row1" size=6/ disabled> 
     </td> 
     <td> 
     <input type="text" id="timepicker1" ng-model="dup_row1 " size=6/> 
     </td> 
    </tr> 
    <tr ng-show="show_row2()"> 
     <td> 
     <input type="text" ng-model="dup_row1" size=6/> 
     </td> 
     <td> 
     <input type="text" ng-model="dup_row2" size=6/> 
     </td> 
    </tr> 
    </tbody> 
</table> 

и мой код сценария

var app = angular.module('myApp', []); 
app.controller('ctrl', function($scope) { 
    $scope.row1 = "00:00" 
    $scope.show_row2 = function() { 
    if (($scope.dup_row1 && $scope.dup_row1.substring(0, 2) < 24)) { 
     return true 
    } 
    } 
$('#timepicker1').timepicki(); 

Любая помощь будет оценена по достоинству. Заранее спасибо

my plunker link

Answer 1

Load JQuery перед тем, как AngularJS, чтобы избежать снова компиляции DOM с JQuery $

Вы должны играть с DOM с помощью directive, если вы используете какой-либо плагин JQuery. Вы можете создать свою собственную директиву, которая будет создавать timepicki для вашего элемента.

Директива

app.directive('timepicki', [ 

    function() { 
    var link; 
    link = function(scope, element, attr, ngModel) { 
     element.timepicki(); 
    }; 

    return { 
     restrict: 'A', 
     link: link, 
     require: 'ngModel' 
    }; 
    } 
]) 

Working Plunkr