整数を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を使用することでした。私の場合、少なくとも1つの値は、親コンポーネントの非同期呼び出し後に変更される可能性があるため、全体的に意味がありました。 Prinay Pandayが上記のように、@バインディングは常に文字列として出てきます。 $onInit()メソッドでは、バインディングを使用できることが保証されますが、コンポーネントが変更されることは保証されません。そのため、コンポーネントの値を変更しても後で変更することができます。これは、ドキュメンテーションが、それらを操作する必要があれば、ローカル変数にバインドされた値をコピーすることを推奨するもう一つの理由です。 $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

「 '=' 表記は基本的にあなたにオブジェクトを渡すためのメカニズムを提供しますので、

ディレクティブの親スコープから常にこれを引き出します... "