angularjs，无法为自定义指令中的多个属性指定值

我遇到了一个问题，我写了一个自定义指令以星级进行评分，用户可以通过点击星星从1至5进行评分，我是成功实现这一目标。angularjs，无法为自定义指令中的多个属性指定值

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

      } 
     } 
}; 
});

来源

2016-04-21 user3539927

您应该使用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>

来源

2016-04-21 20:05:54 AWolf

angularjs，无法为自定义指令中的多个属性指定值

回答

相关问题