Angularjs：模态中的 JQuery UI 指令导致麻烦答案

【问题标题】：Angularjs: JQuery UI Directive in Modal leads into troublesAngularjs：模态中的 JQuery UI 指令导致麻烦
【发布时间】：2013-06-06 06:48:15
【问题描述】：

使用 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 = ...）有关。似乎角度试图渲染不再存在的东西。但我无法修复它。特别是因为指令不知道它是否处于模态。因此，缓存一个模态关闭事件是没有意义的。

【问题讨论】：

标签： modal-dialog angularjs-directive angular-ui jquery-ui-timepicker

【解决方案1】：

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

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

剪掉这段额外的代码后，我的例子就像一个魅力。

【讨论】：