指令/テンプレートでng-repeatをどのように使用しますか？

Question

私が定義した配列に対してng-repeatを使って反復しようとしています。これはカスタムElementを書き出します。カスタムElementにはHTMLを置き換えるDirective /テンプレートがあります。

ng-repeatを使用しない場合、カスタム属性がテンプレートで選択され、入力されます。

<my-custom-elm customAttr1="customVal1" customAttr2="customVal2"></my-custom-elm> 
<my-custom-elm customAttr1="customVal3" customAttr2="customVal4"></my-custom-elm> 

と：

app.directive('myCustomElm', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      customAttr1: '@', 
      customAttr2: '@' 
     }, 
     template: '<div class="{{ customAttr1 }}">{{ customAttr2 }}</div>' 
    } 
}); 

が出て記述します。

<div class="customVal1">customVal2</div> 
<div class="customVal3">customVal4</div> 

をしかし、私は繰り返しNGリピートを使用してこれを実行しようとすると、よう：

<my-custom-elm ng-repeat="x in jsArr" customAttr1="{{ x.customAttr1 }}" customAttr2="{{ x.customAttr2 }}"></my-custom-elm> 

プレースホルダは値を受け取りません。 HTMLの属性は要素に書き込まれるため、何らかの理由で私が参照しているプレースホルダだけです。

アイデア？ {}：

Answer 1

あなたは属性の区切りとしても

angular.module('test', []) 
 
    .controller('Test', Test) 
 
    .directive('myCustomElm', myCustomElm); 
 
    
 
function Test($scope) { 
 
    $scope.jsArr = [ 
 
    {customAttr1: 'foo', customAttr2: 'bar'}, 
 
    {customAttr1: 'oof', customAttr2: 'rab'} 
 
    ] 
 
} 
 

 
function myCustomElm() { 
 
    return { 
 
    restrict: 'E', 
 
    replace: true, 
 
    scope: { 
 
     customAttr1: '@', 
 
     customAttr2: '@' 
 
    }, 
 
    template: '<div class="{{ customAttr1 }}">{{ customAttr2 }}</div>' 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 
<div ng-app='test' ng-controller='Test'> 
 
    <my-custom-elm ng-repeat="x in jsArr" custom-attr1="{{ x.customAttr1 }}" custom-attr2="{{ x.customAttr2 }}"></my-custom-elm> 
 
</div>

Answer 2

範囲内で@ "「の代わりに=」" 使用してみてください customAttr1>custom-attr1ダッシュするキャメルケースに変換する必要があります。