Angular bindings misunderstanding.

[SanderElias]

I have gone over some of the tests, and there is an issue. Most of the things in there are not supposed to work as they do now.

 <my-input message="{{main.greeting}}" ce-interpolated></my-input>

link

Is making a 2 way binding (updating the angular side of things) out of something that is designed to be a 1 way (angular --> DOM) binding.

This is a really cool solution, but it is going against the way angular normally works.

2 way bindings are centered around ngModel. The controller that comes along with it makes it possible to efficiently create an interface with all 3rth parties. Also it makes it more explicit what's happening.

The line should read something like:

<my-input ng-model="main.greeting" bind-to-attr="message"></my-input>

There is no "magic" and its very explicit how it is supposed to work. here I created a first draft for this concept. where you can see this in action.

It is not a perfect solution. It's very hard to make a solution that works in every case, because there are missing pieces. One piece that is missing for example is a way to tell an custom element to render the new data to its view. Polymer has this part covered, but I don't know if all of polymer elements follow this convention.

[robdodson]

this is something I was a little curious about. The docs for ngModel seem to assert that it's primarily for input, select, or some other form control. But what if I'm not making a form control? Would I still use ngModel?

[SanderElias]

Yes, it also works with fully custom elements. If you element mimics an input, you probably don't even need the extra attribute I created. If not, you need some extra code so ngModel knows how to interface with the element. This is what my directive's does.

The big upside of using ngModel is that it takes care of $scope and controller issues. The only thing is, it does not really work well with array's and objects. However, as those are passed by reference in JS, we actually don't need special handling in that case. Angular will pick up changes in there with its dirty checking. In some of that cases, we might need an $scope.$digest, of perhaps even an $apply

During the creation of this directive, I found some things lacking in the custom-elements, so I opened an issue there https://github.com/w3c/webcomponents/issues/562. Too bad it didn't receive much love in there ;)

2016-09-07 18:32 GMT+02:00 Rob Dodson [email protected]:

this is something I was a little curious about. The docs for ngModel https://docs.angularjs.org/api/ng/directive/ngModel seem to assert that it's primarily for input, select, or some other form control. But what if I'm not making a form control? Would I still use ngModel?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/robdodson/angular-custom-elements/issues/21#issuecomment-245339691, or mute the thread https://github.com/notifications/unsubscribe-auth/ABMPOx9wIKPICFILDYK1As29if3je2UAks5qnucigaJpZM4J17Rf .