在自定义指令模板中使用 ng-if 导致无法将调整大小事件绑定到元素

Question

我将我的 Pop-UP（即 bootstrap 弹出）指令多次放在一个页面上。仅当 ng-if 为真时弹出窗口出现，作为属性参数发送，但 jQuery 调整大小函数未绑定到 link 中的元素指令的功能。

这是我指令中 HTML 的第一行

<div  class='ng-modal' id='Modal1' ng-if='show'>

点击按钮时show为真，弹窗出现在UI但是

$('#ModalDialog').resizable()

没有被开火。虽然如果我这样做

$timeout(function () {$('#Modal1').resizable() }, 1000);

然后它工作正常，但我的代码中不允许使用 $timeout 函数。执行此操作的正确技术是什么？

我的发现：只有当指令被多次放置在一个页面上时才会出现问题，使用 ng-show 的单次调用不会造成任何问题。

Answer 1

由于 JQuery 依赖于现有的 DOM 元素，在

的执行期间

$('#ModalDialog').resizable()

带有“#ModalDialog”的元素可能存在也可能不存在。我不熟悉 JQuery 可调整大小，但是当您需要在 angular 中的元素上应用 JQuery 时，最佳做法是创建指令并使用link 函数中的 DOM。这将确保非 angular 行为正确应用于元素。

.directive('uiResizable', function() {
return {
    restrict: 'A',
    scope: ...,
    templateUrl: ...,
    link: function(scope, element, attrs) {
        element.resizable();
    }
  };
});

并将 JQuery 可调整大小应用于元素：

<div id="#ModalDialog" ui-resizable ng-if ...>

希望对您有所帮助。

在自定义指令模板中使用 ng-if 导致无法将调整大小事件绑定到元素

Using ng-if in a custom directive template causing trouble to bind resizing event to element

resize

jquery-ui

angularjs

angularjs-directive

angular-ng-if