Polymer 1.0 and angular binding

Question

I'm encountering an issue binding from angular to Polymer 1.0.

Here is my custom element that has a single property named myprop:

<dom-module id="my-custom-element">
    <template>
        <span>{{myprop}}</span>
    </template>
</dom-module>
<script>

    Polymer({
        is: 'my-custom-element',
        properties: {
            myprop: String
        },
        ready: function () {
            var p = this.myprop;  //why is p set to "{{testfield}}" and not "Hello!"?
        }
    });

</script>

Here is the HTML:

    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <my-custom-element myprop="{{testfield}}"></my-custom-element>
        </div>
    </div>

And here is the angular controller:

<script>
    angular.module("myApp", ["my.directives"]).controller("myCtrl", function ($scope) {    
        $scope.testfield = "Hello!";    
    });    
</script>

In the Polymer ready function why is the variable p set to the string "{{testfield}}"? I would expect it to have value "Hello!". Note that the custom element is actually displaying the text "Hello!" so it looks like the binding in the custom element template is working as expected. But I don't understand why the bound-to value isn't available in the ready function.

miyamoto miyamoto · Accepted Answer · 2015-07-02T22:27:02

ready is being called before angular binds testfield to myprop so what is initially bound instead is the string "{{testprop}}". The element must be attached (which occurs after ready) to the document before angular can have a chance to bind anything to it. Then once angular binds testfield to myprop the value is updated and displays as "Hello!".

You can verify this for yourself by printing messages from ready, attached, and the controller and see the order in which they appear.

Polymer 1.0 and angular binding

1 Answers