7

$ scopeからこのようなカスタムディレクティブに属性を渡すことができる必要がありますか？

        <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」はディレクティブに問題なく通過しますが、{{ratable.currentvalue}}を渡そうとしたときの文字列補間は発生しないようです。私は明らかに間違ったことをしていますか？

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>
4

1 に答える 1

10

いくつかのこと：

  • HTMLのディレクティブ属性はkebab-caseを使用する必要があります
  • 分離スコープは必要ありません（実際、問題が発生しています）。代わりに使用するscope: true
  • テンプレートがそれらを取得できるように、ローカルスコープのプロパティを設定する必要があります
  • $observe補間された属性（つまり、{{}}を使用する属性）の値を取得するために使用する必要があります

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);
}

フィドル

分離スコープを使用するバージョンは次のとおりです。

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

フィドル

リンク関数で分離スコーププロパティの値を確認する場合は、$observeまたは$watch「@」を使用したために使用する必要があります。'='（双方向データバインディングの場合）を使用する場合は、$observeまたはを使用する必要はありません$watch。

于 2013-03-26T19:55:00.633 に答える