JsObject 的匿名回调函数在用户操作之前不会更新 Dart 控制器

Question

给定飞镖代码

class LandingController {
  bool hideDiv = false;

  void doit() {
      new JsObject(context['loginControls']).callMethod('fadeLogin', [() {
         print(hideDiv);
         hideDiv = true;
         print(hideDiv);
         print("WTF");
      }]);
  }
}

调用JS：

var loginControls = function() {
  this.fadeLogin = function(func) {
    $('#landingHeader').animate({ opacity: 0 }, 500, func);
  }
};

应该会影响视图：

<button ng-click="doit();">Click</button>
<div id="landingHeader">Hide me after button click</div>
<div ng-if="ctrl.hideDiv == false"><img src="assets/img/ajax-loader-small.gif">Waiting for div to disappear...</div>

单击按钮并延迟 500 毫秒后，我在控制台中看到“WTF”打印正确。但是，div 仍然可见。一旦发生用户操作，在我的例子中是鼠标点击，div 就会神奇地消失。似乎控制器的值发生了变化，但浏览器没有收到隐藏 div 的更改，因为我已经在匿名回调中打印了控制器的值。

有一个变通方法，但它涉及将 Dart 计时器设置为与 JsObject 调用后在 javascript 中使用的相同的淡入淡出时间，并在这些计时器回调中设置控制器的值 - 很糟糕，但它有效。

Answer 1

我认为您需要致电scope.apply()。我认为当从另一个区域（如 JS）调用 doit() 时，Angular 无法识别 hideDiv 中的值变化。

您通常不需要在 Angular.dart 中调用 scope.apply()，但我认为这是例外之一。

animate 函数是您使用jQuery 的唯一原因吗？使用 Angular.darts 动画功能可能更容易做到这一点。