[英]How to access Angular 1.5 component property inside a template
I am trying to implement a simple component in Angular 1.5 I am trying to access binded(bound) properties 'compTitle' in component mycomponentheader'. 我试图在Angular 1.5中实现一个简单的组件我试图访问组件mycomponentheader'中的绑定(绑定)属性'compTitle'。
var mycomponentheader = {
....
bindings: {
'comptitle': '@mycomptitle'
},
....
};
I am passing the attribute value [compTitle="encryptedTitle"] in html markup in the view. 我在视图中的html标记中传递属性值[compTitle =“encryptedTitle”]。
<mycomponentheader mycomptitle="encryptedTitle">
<div>
This is displayed for component content
</div>
</mycomponentheader>
wnen i try to use the similar mechanism in directive it works. 我尝试在指令中使用类似的机制。 The jsfiddle for the same is @ https://jsfiddle.net/visibleinvisibly/4n7vsas7/
相同的jsfiddle是@ https://jsfiddle.net/visibleinvisibly/4n7vsas7/
i am aware of defining the template property as a function that can be injected with $element and $attrs ( template: function ($element, $attrs){ } in Angular 1.5) but i am looking for other methods. 我知道将模板属性定义为可以在Angular 1.5中使用$ element和$ attrs(template:function($ element,$ attrs){}注入的函数,但我正在寻找其他方法。
Thanks in Advance 提前致谢
Have a look at the component's guide . 看一下组件指南 。
You'll see that, by default, the bindings are bound to the controller
and they are under $ctrl
, instead of this
, since controllerAs
is used. 你会看到,默认情况下,绑定绑定到
controller
,它们在$ctrl
,而不是this
,因为使用了controllerAs
。
This being said, just access comptitle
from $ctrl
, as such: $ctrl.comptitle
. 这
comptitle
,只需从$ctrl
访问comptitle
,如: $ctrl.comptitle
。
Here is the working demo. 这是工作演示。
Note: on the component's guide you'll see a list with the main differences between components and directives. 注意:在组件指南中,您将看到一个列表,其中包含组件和指令之间的主要差异。 You'll notice that some of the
mycomponentheader
properties aren't needed as they don't exist for a component. 您会注意到某些
mycomponentheader
属性不需要,因为它们不存在于组件中。 These properties include: restrict
(it already defaults to E
) and replace
(which is unsupported). 这些属性包括:
restrict
(已经默认为E
)和replace
(不支持)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.