将整数绑定到 AngularJS 1.5 组件

Question

在组件中使用属性绑定时，传递给控制器的数据始终是字符串。但是，我正在尝试传递一个整数，但无法将其从字符串转换为转换棒。

我尝试在 $onInit() 中将数据保存为整数，但在此函数之外，数据 returns 恢复为原始状态（类型和值）。我明白组件不应该修改作为一般规则传入的数据，但由于这是一个属性绑定，并且数据是按值传递的，所以我认为不适用。

function IntegerBindingController() {
  this.$onInit = function() {
    // Assuming 'number="2"' in the HTML
    // This only changes the data inside this function
    this.number = parseInt(this.number)
    this.typeofNumber = typeof this.number // evaluates to 'number'
    this.simpleAdd = this.number + 5 // evaluates to 7
    this.dataAdd = this.numberOneWay + 5
    console.log(this)
  }

  this.test = function() {
    // this.number is a string inside this function
    this.typeofNumber = typeof this.number // evaluates to 'string'
    this.simpleAdd = this.number + 5 // evaluates to 25
  }
}

我可以通过将数据复制到控制器上的新属性来解决这个问题，但我很好奇是否有人可以解释这里发生的事情。有关此问题的工作示例，请参阅此 Plunker。

Answer 1

使用“@”传递数字将始终将其作为字符串传递。如果您希望在组件绑定中使用“=”而不是对象值传递数字。

所以：

var IntegerBindingComponent = {
  controller: IntegerBindingController,
  bindings: {
   string: '@',
   number: '=',
   numberOneWay: '<'
 },
 template: _template
}

可以在这里找到一个体面的解释：http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

或此处：Need some examples of binding attributes in custom AngularJS tags

"The '=' notation basically provides a mechanism for passing an object into your directive. It always pulls this from the parent scope of the directive..."

Answer 2

我最终采用的解决方案是使用 $onChanges 来处理绑定数据值。在我的例子中，至少有一个值在父组件中的异步调用后可能会发生变化，所以这在总体上是有意义的。正如 Prinay Panday 上面提到的，@ 绑定总是作为字符串出现。 $onInit() 方法保证绑定可用，但不保证它们会更改，因此即使您更改组件上的值，Angular 也可以稍后更改。这是文档建议在您完全需要操作绑定值时将其复制到局部变量的另一个原因。至于 $onChanges() 解决方案，它看起来像这样

function IntegerBindingController() {
  this.$onChanges(changes) {
    if (changes.number && changes.number.currentValue) {
        this.number = parseInt(changes.number.currentValue)
    }
  }

  this.test = function() {
    this.typeofNumber = typeof this.number // evaluates to 'number'
    this.simpleAdd = this.number + 5 // evaluates to 7 (assuming this.number was 2)
  }
}

将整数绑定到 AngularJS 1.5 组件

Binding an integer to AngularJS 1.5 component

components

angularjs

angularjs-bindings