dart - JsObject 的匿名回调函数在用户操作之前不会更新 Dart Controller

Question

给定 Dart 代码

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);
  }
};

这应该会影响 View :

<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神奇地消失了。似乎 Controller 的值已更改，但浏览器没有收到隐藏 div 的更改，因为我在匿名回调中打印了 Controller 的值。

有一个解决方法，但它涉及将 Dart 计时器设置为与 JsObject 之后在 javascript 中使用的相同的淡入淡出时间。在那些 Timer 回调中调用并设置 Controller 的值 - 粗略但它有效。

Answer 1

我想你需要调用scope.apply() .我认为 Angular 无法识别 hideDiv 中的值变化当doit()从另一个区域(如 JS)调用。

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

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