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中使用的相同的淡入淡出时间，并在那些Timer回调中设置控制器的值 - 粗略但它有效。 / p>

Answer 1

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

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

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

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

1 个答案: