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>