32

個々の値を使用できるように、配列をテンプレートに取得しようとしています。私の問題は、属性がテンプレート内で一度文字列に変わるため、{{var[0]}} としてアクセスできなくなり、代わりに「文字列」の最初の文字、通常は「[」を返すことです。

以下は、データの単純化されたセットアップです。

"varForward": ["100", "1"],
"varBack": ["1", "100"]

以下は、そのデータとやり取りする HTML ファイルの簡略化された部分です。

<my-customer-vars value="{{varForward}}">
    </address-numbers>
<my-customer-vars value="{{varBack}}">
    </address-numbers>

最後に、カスタムタグを自分のものに置き換えることがサポートされている部分を次に示します。

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "@"
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

それで、ここにいます。 value[0] を使用しようとすると [ value[1] を取得しようとすると " などとなります。ディレクティブのテンプレート内で配列を使用する際に何か助けはありますか?

4

4 に答える 4

46

「@」を「=」に変更し、{{ }} なしで配列を渡す必要があります。

このような：

<my-customer-vars value="varForward">
    </my-customer-vars>
<my-customer-vars value="varBack">
    </my-customer-vars>

指令：

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

これは、@ で定義された指示属性内のすべての式が文字列としてのみ評価され、他の方法ではバインディング式として評価されるために発生します。(2WAYバインディングなのでご注意ください)。

于 2013-02-04T21:20:20.187 に答える
16

ディレクティブで分離スコープを作成したくない場合 (カスタム検証ディレクティブを作成する場合など)、次のように配列を渡すことができます。

<my-customer-vars model="varForward">

そして、ディレクティブのリンク関数の値を次のように読み取ります。

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        link: function (scope, elm, attrs, ctrl) {
            var myVars = scope[attrs.model]; // <--- took a time to figure out
            console.log(myVars);
        }
    }
});
于 2013-08-27T23:44:59.047 に答える
0

ちょうど別の観点 - 問題が単にAngularアプリケーションで文字列の配列を管理している場合、次のいずれか(または類似のもの)を使用します:

  1. ngTagsInput
  2. タグモードでAngular select2
  3. ngList

独自の角度ディレクティブの作成を練習している場合を除きます (その後、私の答えを無視してください)。

于 2016-09-07T17:55:38.077 に答える