Directive ng-include doesn't work as expected

[akserg]

I'm busy migrate Angular Dart UI on latest Dart SDK 1.6.0 and Angular Dart 0.14.0 and find that next snippet:

<div ng-include="extra/demo.html"></div>

generate next exception:

No getter for 'ctrl'.

STACKTRACE:
#0      StaticClosureMap.lookupGetter (package:angular/core/parser/static_closure_map.dart:15:25)
#1      DynamicParserBackend.newAccessScope (package:angular/core/parser/dynamic_parser.dart:112:38)
#2      DynamicParserImpl.parseAccessOrCallScope (package:angular/core/parser/dynamic_parser_impl.dart:257:67)
#3      DynamicParserImpl.parsePrimary (package:angular/core/parser/dynamic_parser_impl.dart:239:36)
#4      DynamicParserImpl.parseAccessOrCallMember (package:angular/core/parser/dynamic_parser_impl.dart:193:30)
#5      DynamicParserImpl.parsePrefix (package:angular/core/parser/dynamic_parser_impl.dart:188:37)
#6      DynamicParserImpl.parseMultiplicative (package:angular/core/parser/dynamic_parser_impl.dart:163:29)
#7      DynamicParserImpl.parseAdditive (package:angular/core/parser/dynamic_parser_impl.dart:149:37)
#8      DynamicParserImpl.parseRelational (package:angular/core/parser/dynamic_parser_impl.dart:131:31)
#9      DynamicParserImpl.parseEquality (package:angular/core/parser/dynamic_parser_impl.dart:117:33)
#10     DynamicParserImpl.parseLogicalAnd (package:angular/core/parser/dynamic_parser_impl.dart:108:31)
#11     DynamicParserImpl.parseLogicalOr (package:angular/core/parser/dynamic_parser_impl.dart:99:33)
#12     DynamicParserImpl.parseConditional (package:angular/core/parser/dynamic_parser_impl.dart:83:32)
#13     DynamicParserImpl.parseExpression (package:angular/core/parser/dynamic_parser_impl.dart:68:34)
#14     DynamicParserImpl.parseFormatter (package:angular/core/parser/dynamic_parser_impl.dart:53:33)
#15     DynamicParserImpl.parsePrimary (package:angular/core/parser/dynamic_parser_impl.dart:220:34)
#16     DynamicParserImpl.parseAccessOrCallMember (package:angular/core/parser/dynamic_parser_impl.dart:193:30)
#17     DynamicParserImpl.parsePrefix (package:angular/core/parser/dynamic_parser_impl.dart:188:37)
#18     DynamicParserImpl.parseMultiplicative (package:angular/core/parser/dynamic_parser_impl.dart:163:29)
#19     DynamicParserImpl.parseAdditive (package:angular/core/parser/dynamic_parser_impl.dart:149:37)
#20     DynamicParserImpl.parseRelational (package:angular/core/parser/dynamic_parser_impl.dart:131:31)
#21     DynamicParserImpl.parseEquality (package:angular/core/parser/dynamic_parser_impl.dart:117:33)
#22     DynamicParserImpl.parseLogicalAnd (package:angular/core/parser/dynamic_parser_impl.dart:108:31)
#23     DynamicParserImpl.parseLogicalOr (package:angular/core/parser/dynamic_parser_impl.dart:99:33)
#24     DynamicParserImpl.parseConditional (package:angular/core/parser/dynamic_parser_impl.dart:83:32)
#25     DynamicParserImpl.parseExpression (package:angular/core/parser/dynamic_parser_impl.dart:68:34)
#26     DynamicParserImpl.parseFormatter (package:angular/core/parser/dynamic_parser_impl.dart:53:33)
#27     DynamicParserImpl.parseChain (package:angular/core/parser/dynamic_parser_impl.dart:35:32)
#28     DynamicParser._parse (package:angular/core/parser/dynamic_parser.dart:40:46)
#29     DynamicParser.call.<anonymous closure> (package:angular/core/parser/dynamic_parser.dart:35:50)
#30     _HashMap.putIfAbsent (dart:collection-patch/collection_patch.dart:124)
#31     DynamicParser.call (package:angular/core/parser/dynamic_parser.dart:35:30)
#32     ASTParser.call (package:angular/change_detection/ast_parser.dart:33:22)
#33     DirectiveSelector.matchText.<anonymous closure> (package:angular/core_dom/selector.dart:147:36)
#34     List.forEach (dart:core-patch/growable_array.dart:228)
#35     DirectiveSelector.matchText (package:angular/core_dom/selector.dart:144:53)
#36     Compiler._elementBinderForNode (package:angular/core_dom/compiler.dart:49:43)
#37     Compiler._compileView (package:angular/core_dom/compiler.dart:129:32)
#38     Compiler._compileNode (package:angular/core_dom/compiler.dart:85:23)
#39     Compiler._compileView (package:angular/core_dom/compiler.dart:128:19)
#40     Compiler._compileNode (package:angular/core_dom/compiler.dart:85:23)
#41     Compiler._compileView (package:angular/core_dom/compiler.dart:128:19)
#42     Compiler.call (package:angular/core_dom/compiler.dart:16:17)
#43     ViewCache.fromHtml (package:angular/core_dom/view_factory.dart:218:29)
#44     ViewCache.fromUrl.<anonymous closure> (package:angular/core_dom/view_factory.dart:228:43)
#45     _rootRunUnary (dart:async/zone.dart:836)
#46     _ZoneDelegate.runUnary (dart:async/zone.dart:466)
#47     _onRunUnary.<anonymous closure> (package:angular/core/zone.dart:117:63)
#48     VmTurnZone._onRunBase (package:angular/core/zone.dart:99:16)
#49     _onRunUnary (package:angular/core/zone.dart:117:17)
#50     _CustomZone.runUnary (dart:async/zone.dart:748)
#51     _Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:488)
#52     _Future._propagateToListeners (dart:async/future_impl.dart:571)
#53     _Future._completeWithValue (dart:async/future_impl.dart:331)
#54     _Future._asyncComplete.<anonymous closure> (dart:async/future_impl.dart:393)
#55     _rootRun (dart:async/zone.dart:825)
#56     _ZoneDelegate.run (dart:async/zone.dart:459)
#57     _onScheduleMicrotask.<anonymous closure> (package:angular/core/zone.dart:122:45)
#58     RootScope._runAsyncFns (package:angular/core/scope.dart:853:25)
#59     RootScope.digest (package:angular/core/scope.dart:731:38)
#60     apply (package:angular/core/scope.dart:321:24)
#61     _rootRun (dart:async/zone.dart:829)
#62     _ZoneDelegate.run (dart:async/zone.dart:459)
#63     VmTurnZone._finishTurn (package:angular/core/zone.dart:154:21)
#64     VmTurnZone._onRunBase (package:angular/core/zone.dart:106:43)
#65     _onRunUnary (package:angular/core/zone.dart:117:17)
#66     _CustomZone.runUnary (dart:async/zone.dart:748)
#67     _CustomZone.runUnaryGuarded (dart:async/zone.dart:656)
#68     _CustomZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:682)

but if I include content of extra/demo.html directly into a page all works fine. We didn't see that issue on Angular Dart 0.12. Here is the source code:

index.html:

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ng include</title>
    <script async type="application/dart" src="index.dart"></script>
    <script async src="packages/browser/dart.js"></script>
  </head>
  <body>
    <h1>Ng include</h1>
    <div ng-include="extra/demo.html"></div>
  </body>
</html>

index.dart:

library demo;
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

part 'extra/demo.dart';

void main() {
  applicationFactory()
  .addModule(new DemoModule())
  .run();
}

class DemoModule extends Module {
  DemoModule() {
    bind(DemoCtrl);
  }
}

extra/demo.html:

<!DOCTYPE html>
<div demo-ctrl>
  <h4>Single toggle</h4>
  <pre>{{ctrl.singleModel}}</pre>
</div>

extra/demo.dart:

part of demo;

@Controller(selector: '[demo-ctrl]', publishAs: 'ctrl')
class DemoCtrl {

  var singleModel = 1;

  DemoCtrl() {
    new Timer.periodic(new Duration(seconds: 1), (Timer t) {
      singleModel++;
    });
  }
}

pubspec.yaml:

name: ng_include
description: A sample web application
dependencies:
  angular: any
  browser: any
transformers:
- angular

[vicb]

This one is probably similar to #1322 and should be fixed at the same time.

TL;DR: the template files are not parsed by the transformer yet.

A workaround for now is to put all your expressions in the exportExpressions config of one of your directive.

@Controller(
    selector: '[demo-ctrl]', 
    publishAs: 'ctrl',
    exportExpressions: ['ctrl']);

[akserg]

I slightly change you code to make it work:

part of demo;

@Controller(selector: '[demo-ctrl]', 
    publishAs: 'ctrl', 
    exportExpressions: const ['ctrl'])
class DemoCtrl {

  var singleModel = 1;

  DemoCtrl() {
    new Timer.periodic(new Duration(seconds: 1), (Timer t) {
      singleModel++;
    });
  }
}

but it doesn't work. I will wait fix from you team.

[vicb]

I'll try to take a look at this issue by eow

[akserg]

Thanks. :)

[akserg]

Hi.
Any progress?

[vicb]

I can confirm that "ng-include"d files are not processed by the transformer. We need to progress on #1456 before this can be further worked. (Sorry for the delay).

[UnlimitedX]

Hello,

We have the same issue when we use Dart2JS "No getter for 'ctrl'.
When we load dinamically the ng-view we got the issue.

Let me know when you'll do some progress.

[paulecoyote]

A little off topic but I was just evaluating angular dart and came via a bug posted to the ui project. Do call stacks usually get 68 deep using this stuff? That seems a bit on the deep / heavy side.

[naomiblack]

@vsavkin can you investigate and propose a fix either in 1.0 or post-1.0?

[vsavkin]

@akserg can you reproduce the issue on the latest master?

[akserg]

Hi Victor,

Let me check.

On 7 October 2014 23:13, Victor Savkin [email protected] wrote:

@akserg https://github.com/akserg can you reproduce the issue on the
latest master?

—
Reply to this email directly or view it on GitHub
#1415 (comment)
.

[naomiblack]

Please open a new issue and reference this one if this is still a concern.

[akserg]

The problem still exists. Does transformers block in pubspec.yaml file
contain only one transformer:

name: angular_ui
...
environment:
sdk: '>=1.4.3 <2.0.0'
dependencies:
angular:
path: C:\Users\GitHub\angular.dart
dev_dependencies:
mock: '>=0.11.0+1 <0.12.0'
unittest: '>=0.11.0+2 <0.12.0'
transformers:

• angular

On 8 October 2014 20:13, Naomi Black [email protected] wrote:

Closed #1415 #1415.

—
Reply to this email directly or view it on GitHub
#1415 (comment).

[vsavkin]

Since ngInclude is not processed by the transormer, the following example won't work:

@Component(
    selector: 'demo',
    template: '''
      Hello Demo
      <div ng-include="included.html"></div>
    '''
)
class DemoCtrl {

  var singleModel = 1;

  DemoCtrl() {
    new Timer.periodic(new Duration(seconds: 1), (_) {
      singleModel++;
    });
  }
}

where included.html is

{{singleModel}}

The transformer does not pick it up because ng-include expressions can be dynamic.

The available options are

Use components

The transformer picks up components' templates.

Use exportExpressions

@Component(
    selector: 'demo',
    template: '''
      Hello Demo
      <div ng-include="included.html"></div>
    ''',
    exportExpressions: const ['singleModel']
)

Add web/included.html to pubspec.yaml

pubspec.yaml
- angular:
    html_files:
      - web/included.html

All the listed workarounds work for me. So if they do not work for you, please submit another issue.

Please note that even though the publishAs property is still present, it is no longer used.

[akserg]

Thank you, Victor.

On 8 October 2014 23:56, Victor Savkin [email protected] wrote:

Since ngInclude is not processed by the transormer, the following example
won't work:

@component(
selector: 'demo',
template: '''
Hello Demo

'''
)
class DemoCtrl {

var singleModel = 1;

DemoCtrl() {
new Timer.periodic(new Duration(seconds: 1), (_) {
singleModel++;
});
}
}

where included.html is

{{singleModel}}

The transformer does not pick it up because ng-include expressions can be
dynamic.

The available options are
Use components

The transformer picks up components' templates.
Use exportExpressions

@component(
selector: 'demo',
template: '''
Hello Demo

''',
exportExpressions: const ['singleModel']
)

Add web/included.html to pubspec.yaml

pubspec.yaml

• angular:
  html_files:
  • web/included.html

All the listed workarounds work for me. So if they do not work for you,
please submit another issue.

Please note that even though the publishAs property is still present, it
is no longer used.

—
Reply to this email directly or view it on GitHub
#1415 (comment)
.