绑定一个整数到 AngularJS 1.5 组件

17 浏览
0 Comments

绑定一个整数到 AngularJS 1.5 组件

当在组件中使用属性绑定时，传递给控制器的数据始终是字符串。然而，我正在尝试传递一个整数，并且在将其从字符串转换并使转换生效方面遇到了问题。\n我尝试在$onInit()中将数据保存为整数，但在这个函数之外，数据会恢复到其原始状态（类型和值）。我理解组件通常不应该修改传入的数据，但由于这是一个属性绑定，并且数据是按值传递的，我认为这并不适用。\n

function IntegerBindingController() {
  this.$onInit = function() {
    // 假设在HTML中为 'number="2"'
    // 这只在此函数内部更改数据
    this.number = parseInt(this.number)
    this.typeofNumber = typeof this.number // 评估为 'number'
    this.simpleAdd = this.number + 5 // 评估为 7
    this.dataAdd = this.numberOneWay + 5
    console.log(this)
  }
  this.test = function() {
    // 在此函数内，this.number 是一个字符串
    this.typeofNumber = typeof this.number // 评估为 'string'
    this.simpleAdd = this.number + 5 // 评估为 25
  }
}

\n我可以通过将数据复制到控制器上的新属性来解决这个问题，但我很好奇是否有人能解释这里发生了什么。请参考此Plunker，其中包含了这个问题的一个可行示例。

0

2 答案

0 Comments

使用$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)
  }
}

0
0 Comments

问题的原因是使用'@'传递数字时，它总是作为字符串传递。如果想要传递对象值，应该使用'='代替。解决方法是使用'='来绑定数字，而不是使用'@'。另外，还可以使用'<'来进行单向绑定。通过这种方式，可以在模板中直接传递整数，而不需要先创建一个对象。

参考链接：http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ 和 https://stackoverflow.com/questions/13032621/13033249#13033249

"='的表示法基本上提供了一种将对象传递到指令中的机制。它始终从指令的父级作用域中获取这个对象..."

我认为组件与指令之间的主要区别之一是使用单向绑定('<')而不是双向绑定('=')。无论如何，使用'<'确实可以工作，但问题仍然是为什么在'$onInit()'函数中更改'this.number'只在该函数的作用域内生效。此外，目标是能够通过模板传递整数，而不是先创建对象。

0