组件指令封装在AngularJS中

Question

我想知道封装AngularJS组件指令（概念上和实现方式）的惯用方法是什么，因为它们的状态可能会通过其属性或控制器的公共接口进行变异。 / p>

一个简单的具体示例可能是具有<spinner>属性的step组件，该属性可能只是数字。 step="non-numeric-value"时该怎么办？

HTML为我们提供了许多示例，其中默认忽略无效的属性/属性值（HTML验证器可能会抱怨），但我无法在Web Components specification中找到任何明确编写的标准以反映在Angular的世界也没有在AngularJS文档中找到关于这个主题的任何内容。

关于AngularJS中的实现细节，与概念上应该发生什么无关，在控制器上使用自定义getter / setter来进行每个绑定是应用封装的正确方法吗？也许使用组件的$onChanges钩子会更好吗？

E.g。使用自定义getter / setter

module.component('spinner', {
    bindings: {
      step: '<'
    },
    controller: Spinner,
    template: '{{$ctrl.step}}'
  });

  function Spinner() {
    this.step = 1;
  }

  Spinner.prototype = {
    constructor: Spinner,

    get step() {
      return this._step;
    },

    set step(value) {
      if (!isNumeric(value)) {
        //Issue a warning? Throw error?
        return;
      }

      this._step = value;
    }
  };