@NgAttr bind statements cannot contain dashes if compiling to JS

[bernardyen]

In Dart, if I have an @NgAttr on a field where the attribute name contains a dash, the binding will not work correctly.

Example:

@NgAttr('foo-bar') someVariable

will not work when we do bind-foo-far="bindingVariable"

However, simply changing it to @NgAttr('foo') and bind-foo="bindingVariable" makes things work. Note that this error only happens when the Dart code is compiled to JavaScript, so it may be a dart2js issue. The obfuscated error for the above example will be o.someVariable no getter someVariable for o.

[jbdeboer]

bind-foo-far should map to @NgAttr('fooFar');

attributes are case insensetive, so we had to choose between camelCase and snake-case. Since bind- is intended for property binding, and 'foo-bar' is not a valid Dart or JS property name, we prefer camelCase.

[bernardyen]

Thanks for the clarification. However, in the AngularDart documentation at https://angulardart.org/tutorial/05-ch03-component.html, it gives an example where we should be able to bind using a hyphen. Can you please update the documentation and explicitly say that hyphenated variables are not supported in the dart2js conversion?

For reference, running it as native dart code in Dartium works fine.

On Fri, Oct 24, 2014 at 11:32 AM, James deBoer [email protected] wrote:

bind-foo-far should map to @NgAttr('fooFar');

attributes are case insensetive, so we had to choose between camelCase and snake-case. Since bind- is intended for property binding, and 'foo-bar' is not a valid Dart or JS property name, we prefer camelCase.

— Reply to this email directly or view it on GitHub https://github.com/angular/angular.dart/issues/1576#issuecomment-60429866 .

[naomiblack]

@vicb can you take a look into this please?

[vicb]

@bernardyen Could you provide a snippet which show the issue, I can not re-produce it.

Also by looking at the code I can't not explain why it would fail and why the behavior would be different in JS vs Dart.

Edit: what version of angular.dart do you use ?

[bernardyen]

Victor,

I'm adding Ted, who knows more about the compilation from Dart -> JS for our application. I don't think I can provide a snippet, but basically if we change the combination of @NgAttr('xxx') and bind-xxx to @NgOneWay and xxx, the problem goes away.

[akberali67]

I am having the same issue, ng-attr does not seem to accept a tag with a dash in it, here is an example below:

I did try to plug the ng-attr with the same value to the

above with the width attribute and that worked perfectly meaning data is getting imported in the controller and html, it is just this tag that does not seem to be working,

                  <div class="col-md-12 col-sm-12 col-xs-6" ng-controller="HomeCtrl">
                    <div>
                      <p>HomeGuru</p>
                      <div class="">
                        <div class="progress progress_sm" style="width: 100%;">
                          <div class="progress-bar bg-green" role="progressbar" ng-attr-data-transitiongoal="{{totalhga | number:0}}"></div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <p>OzHomeValue</p>
                      <div class="">
                        <div class="progress progress_sm" style="width: 100%;">
                          <div class="progress-bar bg-green" role="progressbar" ng-attr-data-transitiongoal="{{totalohva || undefined}}"></div>
                        </div>
                      </div>
                    </div>
                  </div>