访问类属性等属性在 Polymer 中有效，但在 Angular.Dart 中无效。
你必须使用 Elements 默认方法.attributes['attrName'] = value
// this doesn't work with Angular
// querySelector("#dc").attributes['val'] = "Frank";
// I found an AngularDart function that may help but it's comment says this is for debugging only
// this example calls the method 'add' on MyComponent
var mc = ngProbe(dom.querySelector('my-component')).directives.firstWhere((d) => d is MyComponent);
mc.add('someValue');
也许有更好的方法我不知道，但无论如何这种方法应该可以工作。
在 Angular 组件/控制器上调用方法的解决方法
这里也有示例： GitHub BWU-Dart Playground
这是我想出的最好的主意。
也许 AngularDart 的创建者中有人知道更好的解决方案。
（我也找不到 AngularJS 的直接解决方案）
EventBus
/**
* Derived from https://github.com/marcojakob/dart-event-bus
*/
library eventbus;
import "dart:async";
import "dart:html";
import "package:logging/logging.dart";
/**
* [EventBus] is a central event hub.
* In addition it automatically updates the page navigation history ([History]
* by calling [window.pushState] for fired events which indicate, that they
* are supposed to update the [History] and refiring events which led to
* [window.pushState] in the case of a [window.onPopState] event.
*/
class EventBus extends Object {
final _logger = new Logger("EventBusModel");
/**
* A [StreamController] is maintained for each event type.
*/
Map<EventType, StreamController> streamControllers = new Map<EventType, StreamController>();
bool isSync = true;
/**
* Constructs an [EventBus] and allows to specify if the events should be
* send synchroniously or asynchroniously by setting [isSync].
*/
EventBus({this.isSync : false});
/**
* [on] allows to access an stream for the specified [eventType].
*/
Stream/*<T>*/ on(EventType/*<T>*/ eventType) {
_logger.finest('on');
return streamControllers.putIfAbsent(eventType, () {
return new StreamController.broadcast(sync: isSync);
}
).stream;
}
/**
* [fire] broadcasts an event of a type [eventType] to all subscribers.
*/
void fire(EventType/*<T>*/ eventType, /*<T>*/ data) {
_logger.finest('event fired: ${eventType.name}');
if (data != null && !eventType.isTypeT(data)) {
throw new ArgumentError('Provided data is not of same type as T of EventType.');
}
var controller = streamControllers[eventType];
if (controller != null) {
controller.add(data);
}
}
}
/**
* Type class used to publish events with an [EventBus].
* [T] is the type of data that is provided when an event is fired.
*/
class EventType<T> {
String name;
/**
* Constructor with an optional [name] for logging purposes.
*/
EventType(this.name);
/**
* Returns true if the provided data is of type [T].
*
* This method is needed to provide type safety to the [EventBus] as long as
* Dart does not support generic types for methods.
*/
bool isTypeT(data) => data is T;
}
index.dart 与 MyComponent 和 main()
library main;
import 'dart:html' as dom;
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:di/di.dart';
import 'event_bus.dart';
class Item {
String name;
Item(this.name);
}
@NgComponent(
selector: 'my-component',
publishAs: 'ctrl',
applyAuthorStyles: true,
template: '''<div ng-repeat="value in ctrl.values"><span>{{value.name}}</span> - <content><content></div>'''
)
class MyComponent {
List<Item> values = [new Item('1'), new Item('2'), new Item('3'), new Item('4')];
void add(String value) {
values.add(new Item(value));
}
EventBus _eb;
MyComponent(this._eb) {
print('MyComponent');
_eb.on(Events.someEvent).listen((e) => add(e));
_eb.on(Events.someEventWithData).listen((SomeEventData ed) {
print('Event received from ${ed.senderId}');
ed.respond(this);
});
}
}
typedef MyComponentEventResponse (MyComponent component);
class SomeEventData {
SomeEventData(this.respond, this.someOtherData, [this.senderId]);
MyComponentEventResponse respond;
var someOtherData;
String senderId;
}
class Events {
static final EventType<String> someEvent = new EventType<String>("someEvent");
static final EventType<SomeEventData> someEventWithData = new EventType<SomeEventData>("someEventWithData");
}
class MyAppModule extends Module {
MyAppModule() {
type(MyComponent);
value(EventBus, new EventBus());
}
}
void main() {
Injector inj = ngBootstrap(module: new MyAppModule());
EventBus eb = inj.get(EventBus);
eb.fire(Events.someEvent, "17");
new Timer(new Duration(milliseconds: 1000), () => eb.fire(Events.someEvent, "33"));
new Timer(new Duration(milliseconds: 2000), () => eb.fire(Events.someEventWithData, new SomeEventData(respond, 'blabla', 'main105')));
}
void respond(MyComponent c) {
dom.window.alert('Demonstrate access to event receiver: Name of 2nd item: ${c.values[1].name}');
}
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<h3>Repeat</h3>
<my-component>
<div>some provided content to repeat</div>
</my-component>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>