Javascript jQuery访问Chrome中的子元素后未更新角度数据绑定

当控制器初始化时，我的应用程序上会显示一个全屏加载画面。启动由根作用域中的一个变量触发，该变量在所有操作完成时切换。在向splash div中的元素添加jQuery动画之后，ng show指令不再在Chrome中更新，直到发生类似resize的窗口事件。其他浏览器的行为与预期相同

我已经试着在div中打印绑定值，可以肯定的是，它会继续显示旧值，即使控制台日志显示它已更改。jQuery代码不会更改splash div本身的任何属性，也不会访问任何范围变量，因此我不理解它如何阻止指令观察根范围

HTML

Chrome控制台输出：

utility.js:117 Splash counter: 1
utility.js:117 Splash counter: 2
utility.js:117 Splash counter: 3
utility.js:117 Splash counter: 4
utility.js:122 Splash counter: 3
utility.js:122 Splash counter: 2
utility.js:122 Splash counter: 1
utility.js:122 Splash counter: 0
utility.js:126 cleared splash

---

这里，角度范围在外部修改，即）不在角度范围链内。因此，您需要通知angular，范围已在外部修改。在

showSplash（）

和

hideSplash（）

方法中使用

$rootScope.$applyAsync（）

。希望这有帮助。@ajaiJothi，这似乎解决了问题。我不明白我是如何在外部修改范围的，因为Angular和jQuery不访问任何相同的属性。如果你能解释一下发生了什么，我接受这个答案。AngularJS将只解释在AngularJS的上下文中所做的模型更改。Angular的内置指令已经这样做了，因此您所做的任何模型更改都会反映在视图中。但是，如果在Angular上下文之外更改任何模型，则需要手动调用

$apply（）

或

$applyAsync（）

将更改通知Angular。这就像告诉Angular您正在更改某些模型，它应该触发监视程序，以便您的更改能够正确传播。例如：如果您使用JavaScript的setTimeout（）函数更新范围模型，Angular无法知道您可能会更改什么。在这种情况下，您需要手动调用

$apply（）

，这将触发

$digest

循环。

function showSplash() {
  $rootScope.showSplash = true;
  splashCounter += 1;
  console.log("Splash counter: " + splashCounter);
}

function hideSplash() {
  splashCounter -= 1;
  console.log("Splash counter: " + splashCounter);
  if (splashCounter < 1) {
    $rootScope.showSplash = false;
    $('.phone-screens').cycle();
    console.log("cleared splash");
  }
}

function animateSplash() {
  // Increment splash counter again so it stays visible until this animation completes
  utility.showSplash();
  var dX = $('#overlay__two').width() / 2;
  $('#overlay__logo').animate({ left: '-=' + (dX + 140) }, function () {
    $('#overlay__one').fadeToggle(1000).fadeToggle(1000, function () {
      $('#overlay__two').fadeToggle(1000).delay(1000).fadeToggle(1000, function () {
        $('#overlay__logo').animate({ left: '+=' + (dX + 140) }, utility.hideSplash);
      });
    });
  });

utility.js:117 Splash counter: 1
utility.js:117 Splash counter: 2
utility.js:117 Splash counter: 3
utility.js:117 Splash counter: 4
utility.js:122 Splash counter: 3
utility.js:122 Splash counter: 2
utility.js:122 Splash counter: 1
utility.js:122 Splash counter: 0
utility.js:126 cleared splash