@ binding的angular 1.5组件/默认值

Question

有没有办法为组件的@绑定指定默认值.

我已经看到了如何使用指令执行此操作的说明:如何在Angular Directive Scope中设置默认值？

但组件不支持编译功能.

所以,我有这样的组件:

{
  name: 'myPad',
  bindings   : {layout: '@'}
}

我希望释放组件的用户必须指定'layout'属性的值.所以这:

<my-pad>...</my-pad>

而不是这个:

<my-pad layout="column">...</my-pad>

而且......这个'layout'属性应该被使用的角度材质JS所消耗,所以它需要在渲染DOM之前被绑定(所以材质JS可以拾取它并添加相应的类到元素).

更新,一些截图来澄清情况:

组件定义:

{
  name : 'workspacePad',
  config : {
    templateUrl: 'src/workspace/components/pad/template.html',
    controller : controller,
    bindings   : {
      actions: '<', actionTriggered: '&', workspaces: '<', title: '@',
      flex: '@', layout: '@'
    },
    transclude: {
      'workspaceContent': '?workspaceContent'
    }
  }
}

组件用法:

<workspace-pad flex layout="column" title="Survey List" actions="$ctrl.actions"
  action-triggered="$ctrl.performAction(action)">
  <workspace-content>
    <div flex style="padding-left: 20px; padding-right: 20px; ">
      <p>test test</p>
    </div>
  </workspace-content>
</workspace-pad>

我想在第二个屏幕截图(用法)选项中制作"flex"和"layout".

---

UPDATE

我的"解决方案"在我的组件的构造函数中有这个:

this.$postLink = function() {
  $element.attr("flex", "100");
  $element.attr("layout", "column");
  $element.addClass("layout-column");
  $element.addClass("flex-100");
}

我希望我不必写最后两行(addClass)......但是,因为我们没有链接和编译组件....我想我现在应该对它感到满意.

Answer 1

首先是组件Angularjs Compoents的很好的文档.另外你以前做过什么,你可以通过使用它或在控制器本身中检查它来使它成为可选项.

例如,你保持绑定,但在你的控制器中你有类似的东西.

var self = this;

// self.layout will be the value set by the binding.

self.$onInit = function() {
    // here you can do a check for your self.layout and set a value if there is none
    self.layout = self.layout || 'default value'; 
}

这应该可以解决问题.如果没有,还有其他生命周期钩子.但是我已经用我的组件完成了这个,甚至在$ onInhait之前运行的$ onChanges中使用它,你实际上可以isFirstChange()在$ onChanges函数中进行检查,我很确定只会在加载时运行一次.但是我自己没有测试过.

还有其他生命周期钩子你可以看看.

编辑

这很有趣,因为我之前已经以这种方式使用过它.你可能面临其他一些问题.虽然这是一个想法.如果将保存的值设置为父控制器中的var并将其传递给带有"<"而不是"@"的组件,该怎么办？这种方式是通过引用而不是值传递,您可以设置监视某些内容并更改var,如果没有为该var设置任何内容使其成为默认值.

对于angularjs组件,组件不会监视"@",但是对于"<",此组件的父级中的任何更改都将传递给组件,因为"<"而被看到.如果要在父控制器中更改"@",则组件不会看到此更改,因为它不是onChanges对象的一部分,只有"<"值.

Answer 2

要设置的值,如果绑定值未设置问,如果该值undefined或null在$onInit().

const ctrl = this;
ctrl.$onInit = $onInit;
function $onInit() {
  if (angular.isUndefined(ctrl.layout) || ctrl.layout=== null)
    ctrl.layout = 'column';
}

这个工程即使该值layout会false.