angularjs、カスタムディレクティブの複数の属性に値を割り当てることができません

Question

私は、星座をクリックして1から5までを評価できる星で評価するためのカスタムディレクティブを書いた問題が残っています。これを達成するのに成功した。

<span starrating class="star-rating" rating="ratedValue" ></span> 

しかし、私は、「評価」と呼ばれる孤立スコープ変数を持つカスタマーレビューを表示するには、同じディレクティブを使用しています、これはあまりにもうまく動作します。

<span starrating class="star-rating" readOnlyFlag="true" rating="reviewItem.rating" ></span> 

しかし、今回はユーザーがクリックして評価を変更しないようにします。したがって、私は "readOnlyFlag"と呼ばれるディレクティブの分離されたスコープ内の別の変数を宣言しています。しかし、私は属性としてreadOnlyFlagの値をディレクティブに代入します。リンク関数の値を取得できません。

ディレクティブコードは以下の通りです：

angular.module("pageDirectives",[]).directive("starrating", function(){ 
    return { 
     restrict : 'A', 
     template :'<ul class="list-inline">' 
    + ' <li ng-repeat="star in stars" ng-class="{filled: $index<=selectedIndex, filled:$index<rating}" ng-click="toggleIndex($index)">' 
     + ' <i class="glyphicon glyphicon-star fa-2x"></i>' 
     + ' </li>' 
     + '</ul>', 
     scope : { 
      rating : '=', 
      readOnlyFlag : '=', 

    }, 
     link: function (scope) { 
      scope.stars=[1,2,3,4,5]; 
      scope.toggleIndex= function(index){ 
       if(!scope.readonlyFlag){ 
        scope.selectedIndex=index; 
        scope.rating=index+1; 
       } 

      } 
     } 
}; 
}); 

Answer 1

あなたのディレクティブに値を取得するためにread-only-flag="true"を使用する必要があります。属性のダッシュに注意してください。

隔離された範囲camelCaseは属性に破線で示されています。

以下のデモをご覧になるか、fiddleをご覧ください。

angular.module('demoApp', []) 
 
.controller('mainController', function($scope) { 
 
\t $scope.readOnly = false; 
 
\t $scope.reviewItem = { 
 
    \t rating: 3 
 
    }; 
 
}) 
 
.directive("starrating", function(){ 
 
    return { 
 
     restrict : 'A', 
 
     template :'<ul class="list-inline">' 
 
    + ' <li ng-repeat="star in stars" ng-class="{filled: $index<=selectedIndex, filled:$index<rating}" ng-click="toggleIndex($index)">' 
 
     + ' <i class="glyphicon glyphicon-star fa-2x"></i>' 
 
     + ' </li>' 
 
     + '</ul>', 
 
     scope : { 
 
      rating : '=', 
 
      readOnlyFlag : '=', 
 

 
    }, 
 
     link: function (scope) { 
 
      scope.stars=[1,2,3,4,5]; 
 
      scope.toggleIndex= function(index){ 
 
      \t console.log(scope.readOnlyFlag) 
 
       if(!scope.readOnlyFlag){ 
 
        scope.selectedIndex=index; 
 
        scope.rating=index+1; 
 
       } 
 

 
      } 
 
     } 
 
}; 
 
});

.filled { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div ng-app="demoApp" ng-controller="mainController"> 
 
    toggle read-only <input ng-model="readOnly" type="checkbox"/> 
 
    <span starrating class="star-rating" read-only-flag="readOnly" rating="rating" ></span> 
 
    <h2> 
 
    always read-only 
 
    </h2> 
 
<span starrating class="star-rating" read-only-flag="true" rating="reviewItem.rating" ></span> 
 
</div>