カスタムディレクティブの属性値を設定するときに文字列の補間が機能しない

Question

$ scopeの属性をこのようなカスタムディレクティブに渡すことができますか？私は{{ratable.currentvalueを}}合格しようとすると、

 <div ng-repeat="ratable in ratables"> 
      <div>How much do you like {{ratable.name}}?</div> 

      <!-- CONFUSED - First element does not work, second element does --> 
      <rating currentRatingValue="{{ratable.currentvalue}}" maxRatingValue="10"></rating> 
     </div> 

ハードワイヤード「10」はうまくディレクティブに通過するが、文字列の補間発生するようですありません。明らかに間違ったことをしていますか？

http://jsfiddle.net/ADukg/2168/

var myApp = angular.module('myApp',[]) 
    .directive("rating", function() { 
     return { 
      restrict: "E", 
      scope: {}, 
      template: "<div class='rating'>Current rating: {{currentratingvalue}} out of {{maxratingvalue}}</div>", 
       link: function (scope, element, attributes) { 
        console.log(attributes.currentratingvalue); // Does not work but seems like it should 
        console.log(attributes.maxratingvalue);  // Does work 
       } 
      };  
     }); 

function MyCtrl($scope) { 
    $scope.name = 'Superhero'; 

    $scope.ratables = [ 
     { name: "sledding", currentvalue: 3, maxvalue: 5 }, 
     { name: "water skiing", currentvalue: 7, maxvalue: 10 }, 
     { name: "whitewater rafting", currentvalue: null, maxvalue: 10 } 
    ]; 
} 

<div> 
    <div ng-controller="MyCtrl"> 
     Hello, {{name}}! 

     <div ng-repeat="ratable in ratables"> 
      <div>How much do you like {{ratable.name}}?</div> 

      <!-- CONFUSED - First element does not work, second element does --> 
      <rating currentRatingValue="{{ratable.currentvalue}}" maxRatingValue="10"></rating> 
     </div> 
    </div> 
</div> 

Answer 1

いくつかのこと：

• ディレクティブは、HTMLの属性を使用すると、（実際にはそれが問題を引き起こしている分離株範囲を必要としないケバブ-場合
• を使用する必要があります）;代わりに、あなたのテンプレートが
• $observeそれらを拾うことができるように補間された属性の値を取得するために使用されなければならないローカルスコープのプロパティを設定する必要がscope: true
• 使用（すなわち、属性その使用{{}}秒）

HTML：

<rating current-rating-value="{{ratable.currentvalue}}" max-rating-value="10"></rating> 

指令：

link: function (scope, element, attributes) { 
    attributes.$observe('currentRatingValue', function(newValue) { 
     console.log('newValue=',newValue); 
     scope.currentRatingValue = newValue 
    }) 
    scope.maxRatingValue = attributes.maxRatingValue; 
    console.log('mrv=',attributes.maxRatingValue); 
} 

Fiddle

---

ここで分離株のスコープを使用するバージョンである：あなたがあなたのリンク機能の分離株スコーププロパティの値を確認したい場合は、「、

.directive("rating", function() { 
    return { 
     restrict: "E", 
     scope: { currentRatingValue: '@', 
       maxRatingValue:  '@' }, 
     template: "<div class='rating'>Current rating: {{currentRatingValue}}" 
       + " out of {{maxRatingValue}}</div>", 
    };  
}); 

Fiddle

'@'を使用したため、$observeまたは$watchを使用する必要があります。 '='（双方向データ結合の場合）を使用する場合は、$observeまたは$watchを使用する必要はありません。