2014-02-15 43 views
0

如果有指令定义,那么通过定义在其上的属性传递给它的范围可以在此指令中使用,以获得模板中使用的所需结果?即我有这样的指令可以在指令内使用指令隔离范围进行计算

var carAuction = angular.module('carAuction'); 

carAuction 
    .controller('mainCtrl', function($scope) 
    { 
     var car = { 
      comments: [] 
     }; 

     car.comments.push({ 
      comment: 'Ok car', 
      rating: 1 
     }); 

     car.comments.push({ 
      comment: 'Nice car.', 
      rating: 2 
     }); 

     car.comments.push({ 
      comment: 'Awesome car!', 
      rating: 3 
     }); 

     $scope.car = car; 
    }) 
    .directive('carCommentRaiting', function() 
    { 
     return 
     { 
      restrict: 'E', 
      templateUrl: 'path/to/template.html', 
      scope: 
      { 
       value: '=value', 
       maxValue: '=max-value' 
      } 
     }; 
    }) 
    .filter('range', function() 
    { 
     return function(input, total) 
     { 
      total = parseInt(total); 

      for (var i=1; i<=total; i++) 
      { 
       input.push(i); 
      } 

      return input; 
     }; 
    }); 

在HTML部分我有

<div> 
    <div ng-repeat="comment in car.comments"> 
     Rating: <car-comment-raiting value="comment.rating" max-value="10"></car-comment-raiting> 
    </div> 
</div> 

template.html

<div> 
    <ul class="list-inline"> 
     <li ng-repeat="n in [] | range:value"><span class="glyphicon glyphicon-star"></span></li> 
    </ul> 
</div> 

而且我想通过额外的价值模板,应计算为maxValue - value。还没有找到任何描述这个的例子。想到使用link属性,但是描述告诉,它被用于其他目的。

UPD: 我能够与

return { 
    restrict: 'E', 
    templateUrl: 'path/to/template.html', 
    scope: 
    { 
     value: '=', 
     maxValue: '=' 
    }, 
    controller: function($scope) 
    { 
     $scope.calculated = $scope.maxValue - $scope.value; 
    } 
}; 

修复它,但由于某种原因,它不工作的所有时间。有一次它有效,另一次是calculated变量是null

+0

请邮寄'template.html'或小提琴 –

回答

2

所有计算必须在直接链接功能或控制器内完成。 这里是例如与指令:

.directive('carCommentRaiting', function() { 
     return { 
      restrict: 'E', 
      template: 'path/to/template.html', 
      scope: { 
       value: '=value', 
       maxValue: '=max-value' 
      }, 
      link : function(scope, element, attr) { 
       scope.calculated = scope.maxValue - scope.value; 
       /// watch value to update calculated on value update: 
       scope.$watch('value', function(newValue){ 
         scope.calculated = scope.maxValue - newValue; 
       }); 
      } 
     }; 
    }); 
+0

试图在控制,但并没有解决这个问题,但链接财产是我一直在寻找的魔力。也没有必要计算外部'$ watch'。谢谢。 – Eugene