Skip to content
This repository has been archived by the owner on Feb 22, 2018. It is now read-only.

Angular transformer and 'orderBy' filter #1023

Open
ntherneau opened this issue May 8, 2014 · 9 comments
Open

Angular transformer and 'orderBy' filter #1023

ntherneau opened this issue May 8, 2014 · 9 comments

Comments

@ntherneau
Copy link

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>
@vicb
Copy link
Contributor

vicb commented May 9, 2014

Thanks for reporting. That's probably an issue with any filter args.

@mvuksano
Copy link
Contributor

mvuksano commented May 9, 2014

@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>

@ntherneau
Copy link
Author

@markovuksanovic Same result, No getter for 'sortOrder'.

@MiguelAngelLV
Copy link

I had a similar problem with ng-style #993

@vicb
Copy link
Contributor

vicb commented May 13, 2014

@MiguelAngelLV Thanks for the ref. Closing this one (duplicate). The issue seems to be that the transformer do not extract expression in filter args.

@vicb vicb closed this as completed May 13, 2014
@vicb
Copy link
Contributor

vicb commented May 13, 2014

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

@vicb vicb reopened this May 13, 2014
@vicb vicb mentioned this issue May 16, 2014
Open
@vicb vicb removed their assignment May 26, 2014
@lasse-damgaard lasse-damgaard mentioned this issue Aug 4, 2014
Open
@tkrotoff
Copy link

tkrotoff commented Sep 2, 2014

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

@bgourlie
Copy link
Contributor

Just got bitten by this bug. Any updates? Seems like a pretty serious bug to have made it into 1.0.

@mengfanhong
Copy link

When can you repair this problem, please?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@mvuksano @vicb @MiguelAngelLV @tkrotoff @bgourlie @ntherneau @mengfanhong