[英]Polymer 1.0 and angular binding
I'm encountering an issue binding from angular to Polymer 1.0. 我遇到了从angular到Polymer 1.0绑定的问题。
Here is my custom element that has a single property named myprop: 这是我的自定义元素,具有一个名为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: 这是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}}"
? 为什么在Polymer
ready
函数中将变量p
设置为字符串"{{testfield}}"
? I would expect it to have value "Hello!". 我希望它具有“ Hello!”的价值。 Note that the custom element is actually displaying the text "Hello!"
请注意,custom元素实际上正在显示文本“ 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.
但是我不明白为什么就绪函数中没有绑定值。
ready
is being called before angular binds testfield
to myprop
so what is initially bound instead is the string "{{testprop}}"
. ready
被称为前角结合testfield
到myprop
那么,什么是最初的约束,而不是为字符串"{{testprop}}"
。 The element must be attached
(which occurs after ready
) to the document before angular can have a chance to bind anything to it. 必须将元素
attached
(在ready
之后发生)到文档,然后才能将angular绑定到该元素。 Then once angular binds testfield
to myprop
the value is updated and displays as "Hello!". 然后,一旦angular将
testfield
绑定到myprop
该值就会更新并显示为“ Hello!”。
You can verify this for yourself by printing messages from ready
, attached
, and the controller and see the order in which they appear. 您可以通过打印
ready
, attached
和控制器中的消息并查看其显示顺序来亲自验证。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.