聚合物 1.0 和 angular 绑定

Question

我遇到了从 angular 绑定到 Polymer 1.0 的问题。

这是我的自定义元素，它有一个名为 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>

这里是 HTML:

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

这里是 angular 控制器：

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

在 Polymer ready 函数中，为什么变量 p 设置为字符串 "{{testfield}}"？我希望它具有价值 "Hello!"。请注意，自定义元素实际上显示的是文本 "Hello!"，因此看起来自定义元素模板中的绑定正在按预期工作。但是我不明白为什么绑定值在就绪函数中不可用。

Answer 1

ready 在 angular 将 testfield 绑定到 myprop 之前被调用，因此最初绑定的是字符串 "{{testprop}}"。在 angular 有机会绑定任何内容之前，该元素必须 attached（出现在 ready 之后）到文档。然后，一旦 angular 将 testfield 绑定到 myprop，该值就会更新并显示为 "Hello!"。

您可以通过打印来自 ready、attached 和控制器的消息来自己验证这一点，并查看它们出现的顺序。

聚合物 1.0 和 angular 绑定

Polymer 1.0 and angular binding

javascript

angularjs

polymer

polymer-1.0