相关疑难解决方法(0)

我正在使用jQuery和AngularJS开发Ajax应用程序.

当我使用jQuery的html函数更新div的内容(包含AngularJS绑定)时,AngularJS绑定不起作用.

以下是我要做的代码:

$(document).ready(function() {
  $("#refreshButton").click(function() {
    $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")
  });
});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

我在带有ID的div中有动态内容#dynamicContent,并且我有一个刷新按钮,可以在单击刷新时更新此div的内容.如果我不刷新内容,增量将按预期工作,但在刷新后,AngularJS绑定将停止工作.

这可能在AngularJS中无效,但我最初使用jQuery构建应用程序并稍后开始使用AngularJS,因此我无法将所有内容迁移到AngularJS.任何有关在AngularJS中工作的帮助都非常感谢.

我有一个网站,允许一个人导入一些数据.他们单击一个按钮,文件选择打开,他们选择一个文件.当他们选择一个文件时,我打开一个他们无法关闭的对话框,告诉他们正在导入他们的数据.一旦我从api调用中获取回调以导入文件,我就关闭该对话框并打开一个新的对话框,提供导入的状态.

在Chrome上,"请等待导入"对话框按预期关闭.在IE上它没有.如果您使用IE 11,它应该在以下小提琴中发生:

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, …