Связывание целого с компонентом AngularJS 1.5

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

Решение, которое я закончил с остроумием h должен был использовать $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) 
    } 
} 

Answer 2

Проходящий номер с '@' всегда будет передавать его как строку. Если вы хотите, чтобы номер объекта проходил с номером '=' вместо привязки компонентов.

Итак:

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

«Обозначение '=' в основном обеспечивает механизм передачи объекта в ваше директива. Он всегда тянет это из родительской области директивы ... »