如何在模板中访问 Angular 1.5 组件属性

Question

我正在尝试在 Angular 1.5 中实现一个简单的组件，我正在尝试访问组件 mycomponentheader 中的绑定（绑定）属性 'compTitle'。

var mycomponentheader = {
    ....
    bindings: {
    'comptitle': '@mycomptitle'
    },
    ....
};

我在视图的 html 标记中传递属性值 [compTitle="encryptedTitle"]。

  <mycomponentheader mycomptitle="encryptedTitle">
    <div>    
      This is displayed for component content
    </div>
  </mycomponentheader>

wnen 我尝试在指令中使用类似的机制。 相同的jsfiddle是@https://jsfiddle.net/visibleinvisibly/4n7vsas7/

我知道将模板属性定义为可以注入 $element 和 $attrs 的函数（Angular 1.5 中的 template: function ($element, $attrs){ }），但我正在寻找其他方法。

提前致谢

Answer 1

看看component's guide。

您会看到，默认情况下，绑定绑定到controller，它们位于$ctrl 下，而不是this，因为使用了controllerAs。

话虽如此，只需从$ctrl 访问comptitle，例如：$ctrl.comptitle。

Here is the working demo.

注意：在组件指南中，您会看到一个列表，其中列出了组件和指令之间的主要区别。您会注意到某些mycomponentheader 属性不需要，因为它们不存在于组件中。这些属性包括：restrict（它已经默认为E）和replace（不受支持）。