聚合物 1.0 和角度绑定答案

【问题标题】：Polymer 1.0 and angular binding聚合物 1.0 和角度绑定
【发布时间】：2015-09-20 11:43:06
【问题描述】：

我遇到了从 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>

这里是角度控制器：

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

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

【问题讨论】：

标签： javascript angularjs polymer polymer-1.0

【解决方案1】：

ready 在 Angular 绑定 testfield 到 myprop 之前被调用，所以最初绑定的是字符串 "{{testprop}}"。该元素必须是 attached（在 ready 之后出现）到文档，然后 Angular 才有机会将任何东西绑定到它。然后，一旦 Angular 将 testfield 绑定到 myprop，该值就会更新并显示为“Hello！”。

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

【讨论】：