Question

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

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

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

“'='表示法基本上提供了一种将对象传递给指令的机制。它始终从指令的父作用域中提取它......”

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组件

2 个答案: