angular.dart变化检测方法的变化

时间:2014-03-15 08:09:32

标签: dart angular-dart

我有一个控制器定义:

  • 控制我的ui外观的一些属性
  • 可以调用以更改这些属性的方法

我还有一个指令,它接收控制器的方法作为能够调用它的参数。

在angular.dart v0.9.9之后。不再检测到控制器属性的任何变化。由于我只是隐式使用范围,通过控制器的属性,我不确定是否应该使用'scope.context',在angular.dart 0.9.9的'break changes'部分中提到。

我该如何解决这个问题?

[更新]

以下是一些代码:

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>test</title>
  </head>
  <body ng-cloak ng-controller="app-ctrl">
    <div>selections: {{ ctrl.selections }}</div>
    <div class="test-click" whenclicked="ctrl.goRight()">click</div>
    <script type="application/dart" src="/test/web/main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

main.dart

library test;
import 'package:angular/angular.dart';
import '../lib/src/app_ctrl.dart';
import '../lib/src/click_dir.dart';
void main() {
  ngBootstrap(module: new TestModule());
}
class TestModule extends Module {
  TestModule() {
    type(AppCtrl);
    type(TestClickDir);
  }
}

app_ctrl.dart

library app;
import 'package:angular/angular.dart';
/** AppCtrl */
@NgController(selector: '[ng-controller=app-ctrl]', publishAs: 'ctrl')
class AppCtrl {
  List selections;
  AppCtrl() {
    selections = ['a','a'];
  }
  void goRight() {
    selections.add('a');
  }
}

click_dir.dart

library clickable;
import 'package:angular/angular.dart';
import 'dart:html';
/** TestClickDir */
@NgDirective(selector: '.test-click', map: const {
  'whenclicked': '&click'
})
class TestClickDir implements NgAttachAware {
  Function click;
  Element self;
  TestClickDir(Element el) {
    self = el;
  }
  void attach() {
    self.onClick.listen((e) => click());
  }
}

3 个答案:

答案 0 :(得分:1)

我想这是因为优化,因为观看收藏很昂贵。也可能是一个错误。

我想你只是为了调试而使用它? 使用以下方法可以轻松实现略微不同的结果:

{{ ctrl.selections | json }} // prints: ["a","a","a","a","a","a","a"]

刚刚发现这个效果更好

{{ ctrl.selections.toString() }} // prints: [a, a, a, a, a, a, a]

答案 1 :(得分:1)

我认为这是一个错误,因为当列表长度发生变化时,即使watch也没有触发。如果您将新列表放入选择(selection = ['a', 'a', 'a']),则更新将更新。

以下是selections = selections;使其有效的工作示例。当前不需要_scope.watch,这里只是给出新语法的示例(watch - 语法在版本0.9.9中已更改)。

编辑:这个例子不起作用。我不知道为什么它在我测试时起作用。我不得不提前犯错,但无论如何这都行不通。我添加了工作解决方案(https://groups.google.com/forum/#!msg/angular-dart/v_t2RUz9lrU/HY7DzAj554sJ

  AppCtrl(Scope _scope) {
    _scope.watch('selections', (newValue, oldValue) => print("selections: $newValue"), context: this);
    selections = ['a','a'];
  }

  void goRight() {
    selections.add('a');
    selections = selections;
    // or
    selections.add('');
    selections[selections.length-1]='a';
    // following works, the code above don't work
   selections = (selections..add('a')).toList();
  }

答案 2 :(得分:0)

请查看here,了解正在发生的事情。

据我所知,改变永远不会触发,因为列表不会改变身份。这段代码过去常常起作用,因为显然总是会进行重新渲染。出于效率原因,情况不再如此。