angular.dart
angular.dart copied to clipboard
dart-archive
Angular transformer and 'orderBy' filter
I'm running into problems when I try to use a field in the 'orderBy' filter that isn't displayed on the page. Works fine in Dartium but not after going through dart2js and the angular transformer (tested both 0.10.0 and 0.11.0). I created a minimal example to demonstrate what I'm running into:
pubspec.yaml
name: Test
dependencies:
angular: 0.11.0
browser: any
transformers:
- angular
test.html
<!DOCTYPE html>
<div ng-app id="things">
<li ng-repeat="thing in ctrl.things | orderBy: 'sortOrder'">{{thing.name}}</li>
</div>
<script type="application/dart" src="test.dart"></script>
<script src="packages/browser/dart.js"></script>
test.dart
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
void main() {
applicationFactory().addModule(new Module()
..bind(ThingController)).run();
}
@Controller(
selector: '[id=things]',
publishAs: 'ctrl')
class ThingController {
List<Thing> things = [];
ThingController() {
things..add(new Thing(3, "A Thing"))
..add(new Thing(1, "One More Thing"));
}
}
class Thing {
int sortOrder;
String name;
Thing(this.sortOrder, this.name);
}
When I try to run this as a JS build I get the following error and stack trace:
No getter for 'sortOrder'.
STACKTRACE:
Error
at dart.wrapException (http://127.0.0.1:4031/test.dart.js:4506:15)
at StaticClosureMap.lookupGetter$1 (http://127.0.0.1:4031/test.dart.js:11172:17)
at DynamicParserBackend.newAccessScope$1 (http://127.0.0.1:4031/test.dart.js:9423:21)
at DynamicParserImpl.parseAccessOrCallScope$0 (http://127.0.0.1:4031/test.dart.js:9777:29)
at DynamicParserImpl.parsePrimary$0 (http://127.0.0.1:4031/test.dart.js:9753:21)
at DynamicParserImpl.parseAccessOrCallMember$0 (http://127.0.0.1:4031/test.dart.js:9710:21)
at DynamicParserImpl.parsePrefix$0 (http://127.0.0.1:4031/test.dart.js:9706:21)
at DynamicParserImpl.parseMultiplicative$0 (http://127.0.0.1:4031/test.dart.js:9685:21)
at DynamicParserImpl.parseAdditive$0 (http://127.0.0.1:4031/test.dart.js:9674:21)
at DynamicParserImpl.parseRelational$0 (http://127.0.0.1:4031/test.dart.js:9659:21) js_primitives.dart:25
It works if I put the 'sortOrder' field somewhere on the page (and rebuild). eg
<li ng-repeat="thing in ctrl.things | orderBy: 'sortOrder'">{{thing.sortOrder}} - {{thing.name}}</li>
@ntherneau What happens if you try using thing.sortOrder instead of just sortOrder?
<li ng-repeat="thing in ctrl.things | orderBy: 'thing.sortOrder'">{{thing.name}}</li>
@MiguelAngelLV Thanks for the ref. Closing this one (duplicate). The issue seems to be that the transformer do not extract expression in filter args.
OOps re-opening, that's two different issues:
- this one is about extracting expressions in filter args,
- 993 is about extracting expressions in ng-style
The fixes should probably be somewhere around https://github.com/angular/angular.dart/blob/master/lib/tools/html_extractor.dart#L36
The problem still exists with v0.14, to solve it I've modified my code to this:
<span ng-repeat="page in ctrl.pages | orderBy: 'rank'">
<!-- ... -->
</span>
@Component(
selector: 'pages',
publishAs: 'ctrl',
templateUrl: '...',
exportExpressions: const ['rank'] // <=====
)
class PagesComponent {
// ...
}
Source of this tip: #1307
Just got bitten by this bug. Any updates? Seems like a pretty serious bug to have made it into 1.0.
