Angularjs: JQuery在Modal中的UI指令会导致麻烦

Question

使用angular指令，我在angularjs项目中创建了一个自定义时间选择器。不幸的是，时间选择器在模态中使用时不能正常工作，参见:http://plnkr.co/edit/QvBHJyoA4O32y9cnsNzE

第一次打开模态时，一切正常。但是当关闭它(通过单击模态外的某个地方)并再次打开它时，我在错误控制台中看到了这一点:

TypeError: Cannot read property 'timeFormat' of undefined
    at methods.setTime (https://dl.dropboxusercontent.com/u/1004639/stackoverflow/jquery.timepicker.js:222:81)
    at $.fn.timepicker (https://dl.dropboxusercontent.com/u/1004639/stackoverflow/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/stackoverflow/angular.min.js:140:131)
    at Object.e.$digest (https://dl.dropboxusercontent.com/u/1004639/stackoverflow/angular.min.js:86:286)
    at Object.e.$apply (https://dl.dropboxusercontent.com/u/1004639/stackoverflow/angular.min.js:88:506)
    at HTMLButtonElement.<anonymous> (https://dl.dropboxusercontent.com/u/1004639/stackoverflow/angular.min.js:144:122)
    at HTMLButtonElement.x.event.dispatch (https://dl.dropboxusercontent.com/u/1004639/stackoverflow/jquery.min.js:5:9843)
    at HTMLButtonElement.y.handle (https://dl.dropboxusercontent.com/u/1004639/stackoverflow/jquery.min.js:5:6626) 

当再次关闭和打开模态时，我在控制台中看到两次错误信息。

我认为这个问题与渲染回调(ngModel)有关。$render =…)。看起来angular试图渲染那些已经不存在的东西。但我无法修复它。特别是因为指令不知道它是否在模态中。因此，缓存模态关闭事件是没有意义的。

Answer 1

我找到了一个解决方案。指令元素有一个$destroy事件。当这个事件被调用时，$render函数可以被一个空函数覆盖:

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

剪掉这些额外的代码后，我的示例工作得非常出色。