CODEWITHSUNDEEP
dartangular-dart
Phil
Phil

Reputation: 50346

AngularDart component not working with ng-repeat but other tags do

I can do a ng-repeat with a input tag as follows.

<input ng-repeat="r in cmp.rooms track by $index" type="text" value="{{r.name}}" />

I made a AngularDart component called <radio_component>, so side by side.

<input ng-repeat="r in cmp.rooms track by $index" type="text" value="{{r.name}}" />
<radio_component ng-repeat="r in cmp.rooms track by $index" 
                        textLabel="{{r.name}}"></radio_component>

The textLabel is defined in my component as 

@NgAttr('textLabel')
String textLabel;

Now it works with text if I set textLabel="HELLO", but it does not work with textLabel="{{r.name}}". I don't understand why? If I include textLabel="{{r.name}}" it doesn't work. Any clues?

To clarify the question and hopefully make it reproducible, here are some test files. The two files are test_component.dart and test_component.html

library minutesheet_component_radiobox;

import 'package:angular/angular.dart';
import 'dart:html';

@Component(
    cssUrl: 'http://localhost:8888/assets/css/admin/module.admin.stylesheet-complete.sidebar_type.no-sidebar.min.css',
    publishAs: 'test_component',
    selector: 'test_component',
    templateUrl: 'packages/minutesheet/component/test_component.html')

class TestComponent extends AttachAware with ShadowRootAware {

  // Chose either NgAttr or NgOneWay
  //@NgAttr("textLabel")
  //String textLabel;

  String _textLabel;
  @NgOneWay('textLabel') 
  String get textLabel => _textLabel; 

  set textLabel(String val) {
    print(val); _textLabel = val; 
  }

  void attach() {
  }

  void onShadowRoot(ShadowRoot shadowRoot) {
  }
}

The html file for this component.

<div class="radio radioCheckbox">
<label class="radio-custom">
<i class="fa fa-circle-o" style="padding-top:1px"></i>
{{test_component.textLabel}}
</label>
</div>

Using these two files I have found that when I use the component the following is true.

If using @NgOneWay then null is passed into the set textLabel if I am using ng-repeat as follows:

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="{{r.name}}" />

If using @NgOneWay passing a string then null is also passed into the set textLabel:

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="HELLO" />

If using @NgAttr and passing the variable {{r.name}} then no value is shown on the HTML page.

If using @NgAttr and passing a "HELLO" then the word HELLO is shown on the HTML page.

If using @NgOneWay and using r.name in textLabel actually passes in the value to set textLabel on the component, however I do not see the value in the output HTML.

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="r.name" />

If using @NgTwoWay and using r.name in textLabel actually passes in the value to set textLabel on the component AND I do see the value in the HTML output. 

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="r.name" />

Ok so @NgTwoWay works BUT now I cannot pass a normal string into the test component if I do it this way. If I then have.

<test_component textLabel="Hello there" />

Then I get this error.

Parser Error: 'there' is an unexpected token at column 7 in [Hello there]

Perhaps this is solved now, I am not sure if this is how it is supposed to work or if its working this way within my application due to some other code making it work strangely. Regardless, for me, it is at a point where I can get my application working, so I am happy enough for the time being.

Finally thanks to Gunter, it appears if the attribute of the component is named text-label and NOT textLabel AND @NgTwoWay is used, it works as expected in the first case. So its solved.

The moral of the story is, do not make component attributes with any upper case characters. (?)

Upvotes: 2

Views: 346

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657018

@NgAttr doesn't work with camel case attribute names. See discussion below.

Upvotes: 3

Related Questions