javascript - polymer 1.0 和 Angular 结合

Question

我遇到从 Angular 绑定(bind)到 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 Controller :

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

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

Answer 1

ready 在 Angular 将 testfield 绑定(bind)到 myprop 之前被调用，因此最初绑定(bind)的是字符串 "{{testprop }}"。该元素必须先附加(在ready之后发生)到文档，然后 Angular 才有机会将任何内容绑定(bind)到它。然后，一旦 Angular 将 testfield 绑定(bind)到 myprop，该值就会更新并显示为“Hello!”。

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