AngularJS集成jQuery UI时出现dialog is not a function错误求助

这种偶发的dialog not a function错误我之前也碰到过几次，大概率是AngularJS初始化和jQuery UI加载的时机没对齐导致的，咱们一步步来排查解决：

1. 严格确认脚本引用顺序 #

这是最容易踩坑的点，必须严格按照以下顺序引入脚本，否则Angular会优先使用自身的jqLite，导致jQuery UI无法正常挂载：

<!-- 第一步：引入jQuery核心库 -->
<script src="jquery.js"></script>
<!-- 第二步：引入包含dialog模块的jQuery UI -->
<script src="jquery-ui.js"></script>
<!-- 第三步：引入AngularJS -->
<script src="angular.js"></script>

如果顺序搞反，即使你在Angular启动前看到jQuery.ui存在，控制器执行时也可能因为Angular绑定了jqLite而非完整jQuery，导致找不到dialog方法。

2. 确保控制器执行时jQuery UI已完全初始化 #

有时候脚本顺序正确，但浏览器的异步加载队列可能让控制器先于jQuery UI的模块初始化完成。可以用Angular内置的工具延迟执行dialog相关代码：

app.controller('YourController', ['$scope', '$timeout', function($scope, $timeout) {
  // 用$timeout延迟0毫秒，让浏览器先完成当前加载队列的任务
  $timeout(function() {
    $('#target-dialog').dialog({
      autoOpen: false,
      modal: true
    });
  }, 0);

  // 或者绑定打开/关闭方法到scope
  $scope.openDialog = function() {
    $('#target-dialog').dialog('open');
  };
}]);

3. 封装成Angular指令（推荐最佳实践） #

直接在控制器里操作DOM不符合Angular的设计理念，还容易触发时机问题。把jQuery UI的dialog封装成自定义指令，指令的link函数会在DOM元素就绪后执行，完美适配加载时机：

app.directive('jqUiDialog', function() {
  return {
    restrict: 'A',
    scope: {
      dialogOptions: '=',
      openDialog: '&'
    },
    link: function(scope, element) {
      // 初始化dialog
      const dialog = element.dialog(scope.dialogOptions || {});

      // 暴露打开方法到父scope
      scope.openDialog = function() {
        dialog.dialog('open');
      };
    }
  };
});

模板中使用方式：

<div jq-ui-dialog dialog-options="{autoOpen: false, modal: true}">
  <!-- 对话框内容 -->
</div>
<button ng-click="openDialog()">打开对话框</button>

4. 排查重复引入jQuery的情况 #

如果页面中多次引入jQuery，后续的引入会覆盖之前的jQuery对象，导致已加载的jQuery UI模块丢失。打开浏览器开发者工具的Network标签，搜索jquery，确保只有一次加载记录。

内容的提问来源于stack exchange，提问作者Pawan Kotak