angularjs - ngDialog 不是在 IE 上以编程方式关闭，而是在 Chrome 上工作

Question

我有一个网站，允许一个人导入一些数据。他们单击一个按钮，文件选择打开并选择一个文件。当他们选择一个文件时，我会打开一个他们无法关闭的对话框，告诉他们他们的数据正在被导入。一旦我从 api 调用中得到回调以导入文件，我就会关闭该对话框并打开一个新的对话框，该对话框给出了导入的状态。

在 Chrome 上，“导入时请稍候”对话框按预期关闭。在 IE 上没有。如果您使用 IE 11，它应该发生在以下 fiddle 中:

http://jsfiddle.net/og6qsxdw/

您会看到一个幽灵般的对话框轮廓上升并逐渐消失，就像它试图关闭一样，但对话框和覆盖图仍然存在。

<div ng-controller="MyCtrl">

  <input type="file" ng-simple-upload web-api-url="http://www.fakeresponse.com/api/?sleep=5" select-fn="importFileSelected" callback-fn="importDataComplete" />

  <script type="text/ng-template" id="templateId">

    <div>
      Getting Data
    </div>
  </script>

</div>

JavaScript/AngularJS 代码:

var myApp = angular.module('myApp', ['ngDialog', 'ngSimpleUpload']);

function MyCtrl($scope, $http, ngDialog) {

  $scope.importDataComplete = function() {
    $scope.dlg.close();
  }

  $scope.importFileSelected = function() {
    $scope.dlg = ngDialog.open({
      template: 'templateId',
      className: 'ngdialog-theme-default',
      closeByDocument: false,
      showClose: false
    });
  }
}


angular.module('ngSimpleUpload', [])
  .directive('ngSimpleUpload', [function() {
    return {
      scope: {
        webApiUrl: '@',
        callbackFn: '=',
        selectFn: '=',
        buttonId: '@'
      },
      link: function(scope, element, attrs) {
        // if button id value exists
        if (scope.buttonId) {
          $('#' + scope.buttonId).on('click', function() {
            // retrieves files from file input
            var files = element[0].files;
            // will not fire until file(s) are selected
            if (files.length == 0) {
              console.log('No files detected.');
              return false;
            }

            Upload(files);
          });
        } else {
          // original code, trigger upload on change
          element.on('change', function(evt) {
            var files = evt.__files_ || (evt.target && evt.target.files);

            Upload(files);

            // removes file(s) from input
            $(this).val('');
          });
        }

        function Upload(files) {
          var fd = new FormData();
          angular.forEach(files, function(v, k) {
            fd.append('file', files[k]);
          });

          // this tell us the user clicked open instead of cancel so we can start our overlay
          scope.selectFn();

          return $.ajax({
            type: 'GET',
            url: scope.webApiUrl,
            async: true,
            cache: false,
            contentType: false,
            processData: false
          }).done(function(d) {
            // callback function in the controller
            scope.callbackFn(d);
          }).fail(function(x) {
            console.log(x);
          });
        }
      }
    }
  }]);

Answer 1

好吧，交易就到这里了。在 IE 中，当您打开对话框时，会实例化两个实例。上传完成后，您可以引用关闭最近的对话框，但在几毫秒之前也已存在。

我一开始以为这只是一个丑陋的 IE 错误，您必须“跟踪”实例，但是，我没有注意到 jQuery 对您的链接功能的参与。因此，我最初的解决方案是一个黑客/解决方法，但可以做得更好。

似乎这两个库的混合是罪魁祸首，Angular 和 jQuery 无法正常通信。我在下面插入了对讨论 jQuery 事件与 Angular 的票证的引用。

jQuery and AngularJS: Bind Events to Changing DOM

解决方案

在这些情况下，我的建议是不要在 Angular 之上利用 jQuery。它增加了一层困惑，并要求您谨慎地保持两者之间的适当耦合(在这种情况下)。

我提供了一个解决方案，我可以在其中清理您的链接功能。它使用了很多现有的代码，但没有 jQuery 位。现在在 Chrome 和 IE 中对我来说似乎都很好。

http://plnkr.co/edit/6Z4Rzg1Zm3w5rYyqQqmg?p=preview

link: function(scope, element, attrs) {

        console.warn("Element is", element);

        // original code, trigger upload on change
        element.on('change', function(evt) {
          var files = evt.__files_ || (evt.target && evt.target.files);
          Upload(files);
        });

        function Upload(files) {
          var fd = new FormData();
          angular.forEach(files, function(v, k) {
            fd.append('file', files[k]);
            console.log("File loaded");
          });

          // this tell us the user clicked open instead of cancel so we can start our overlay
          scope.selectFn();


          $http({
            url: scope.webApiUrl,
            method: "GET",
            cache: true
          }).success(function(d, status, headers, config) {
            scope.callbackFn(d);
          }).error(function(data, status, headers, config) {
            console.warn("Request failed...");
          });

        }
      }