聚合物1.0和角度綁定

Question

我遇到了從角度綁定到聚合物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：

這裏是角控制器：

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

在Polymer ready函數中爲什麼變量p設置爲stri ng "{{testfield}}"？我希望它有價值「你好！」。請注意，自定義元素實際上顯示文本「你好！」所以它看起來像自定義元素模板中的綁定正在按預期工作。但我不明白爲什麼在ready函數中沒有可用的bound-to值。

Answer 1

ready在angular binds testfield到myprop之前被調用，所以最初綁定的是字符串"{{testprop}}"。該元素必須是attached（發生在ready之後）到文檔之前，angular可以有機會綁定任何內容。然後，一旦角度綁定testfield到myprop，該值就會更新並顯示爲「Hello！」。

您可以通過打印來自ready，attached和控制器的消息並查看它們的顯示順序來驗證這一點。