2016-12-16 5 views
4

カスタムディレクティブで一方向バインディングを使ってデータ操作をしようとしていますが、初めて "未定義"が返されます。私はディレクティブで何をし、$ watchを使わないのですか?一方向バインディングを使用してディレクティブのデータを正しくフォーマットする方法はありますか?

例:

<one val={{arr[1].value}}> </one> 
 
<two val="arr[0].value"> </two>

ディレクティブ:

.directive('one', function(){ 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     val:'@' 
 
     }, 
 
     template: '<div> 1111 {{val}} </div>' , 
 
     link: function (scope) { 
 
     console.log('scope', scope.val) // SHOWS UNDEFINED BUT INSERT DATA IN TEMPLATE 
 
     if(scope.val) scope.val = \t scope.val.replace(/\d/g,'') 
 
     
 
     
 
     } 
 
    } 
 
    }) 
 
    .directive('two', function(){ 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     val:'=' 
 
     }, 
 
     template: '<div> 2222 {{val}} </div>' , 
 
     link: function (scope) { 
 
     console.log('scope', scope.val) 
 
     scope.val = \t scope.val.replace(/\d/g,'') 
 
     
 
     } 
 
    } 
 
    });

例:JsFiddle

+0

を探す

link: function (scope,elum,attr) { attr.$observe('val', function(value) { console.log('scope', scope.val) }) //console.log('scope', scope.val) if(scope.val) scope.val = scope.val.replace(/\d/g,'') } 

ツーリンク関数のコードを変更する結合片道からの値にアクセスするためにattr.$observeを使用する必要があります。あなたが望む出力は何ですか? – Cruzer

+0

あなたは2人で行ったのと同じ方法に従っていませんか? –

+0

@SaEChowdaryそれが疑わしい理由です。 –

答えて

2

あなたは手の込んだしてください更新JsFiddle

+0

私はこれでいくつかの答えからこれを試してみましたが、そのリンク関数を適切に配置することができませんでした。うまくいく仕事 –

+0

リンク関数でパラメータのシーケンスが欠落している必要があります。それがあなたを助けてくれたことを知ってよかった。 – Viplock

関連する問題