0

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

我尝试将数据保存为整数，$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。

4

2 回答 2

3

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

所以：

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

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

或在这里：需要一些自定义AngularJS标签中的绑定属性示例

“'=' 符号基本上提供了一种将对象传递到指令中的机制。它总是从指令的父范围中提取它......”

于 2017-01-31T17:00:35.060 回答
0

我最终采用的解决方案是用来$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)
  }
}
于 2017-02-08T19:36:40.520 回答