Angularjs: директива JQuery UI в Модале приводит к неприятностям

Question

С помощью угловой директивы я создаю пользовательский таймер в моем проекте angularjs. К сожалению, средство выбора времени не работает должным образом при использовании его в модальном режиме, см.: http://plnkr.co/edit/QvBHJyoA4O32y9cnsNzE

При первом открытии модала все работает нормально. Но, закрыв его (щелкнув где-то за пределами модального окна) и открыв его снова, я вижу это в консоли ошибок:

TypeError: Cannot read property 'timeFormat' of undefined
    at methods.setTime (https://dl.dropboxusercontent.com/u/1004639/stackru/jquery.timepicker.js:222:81)
    at $.fn.timepicker (https://dl.dropboxusercontent.com/u/1004639/stackru/jquery.timepicker.js:821:48)
    at ngModel.$render (http://run.plnkr.co/o2Sj3E7DaqcyasgA/app.js:26:23)
    at Object.<anonymous> (https://dl.dropboxusercontent.com/u/1004639/stackru/angular.min.js:140:131)
    at Object.e.$digest (https://dl.dropboxusercontent.com/u/1004639/stackru/angular.min.js:86:286)
    at Object.e.$apply (https://dl.dropboxusercontent.com/u/1004639/stackru/angular.min.js:88:506)
    at HTMLButtonElement.<anonymous> (https://dl.dropboxusercontent.com/u/1004639/stackru/angular.min.js:144:122)
    at HTMLButtonElement.x.event.dispatch (https://dl.dropboxusercontent.com/u/1004639/stackru/jquery.min.js:5:9843)
    at HTMLButtonElement.y.handle (https://dl.dropboxusercontent.com/u/1004639/stackru/jquery.min.js:5:6626) 

При повторном закрытии и открытии модального окна в консоли дважды появляется сообщение об ошибке.

Я предполагаю, что проблема связана с обратным вызовом рендеринга (ngModel.$ Render = ...). Кажется, что angular пытается визуализировать вещи, которых больше не существует. Но я не могу это исправить. Тем более, что директива не знает, является ли она модальной или нет. Следовательно, нет смысла кэшировать событие модального закрытия.

Answer 1

Я нашел решение. Директива-элемент имеет событие $destroy. Когда вызывается это событие, функция $render может быть перезаписана пустой функцией:

element.bind("$destroy", function() {
    if (ngModel) {
        ngModel.$render = function() {};
    }
});

С помощью этого дополнительного кода мой пример работает как шарм.