javascript - 删除 Angular View 属性中的空间

Question

我有一个 ng Repeat 指令，在其中动态设置高度

 <ul>
<li ng-repeat="val in values" height-dir >{{val.a}}</li>
</ul>

    app.directive('heightDir',function(){
return {
    restrict: 'AE',
    replace: true,
    template: '<li ng-repeat="val in values" style="height:{{val.b}}%" >{{val.a}}</li>',
    link: function(scope, elem, attrs) {

    }
  };
});
$scope.values= [{a:"Doe",b:10},{a:"bom",b:20},{a:"kal",b:30},{a:"jijo",b:40}];

问题是当我运行时，值和 % 之间存在间隙，因此未应用样式。如何解决这个问题，我缺少什么吗？谢谢。

Answer 1

我认为这与生成错误的 HTML 标记有关。

查看:

<div ng-controller="MyCtrl">
    <ul style="height:500px">
        <height-dir ng-repeat="val in values"></height-dir>
    </ul>
</div>

代码:

var myApp = angular.module('myApp',[]);

myApp.directive('heightDir',function(){
    return {
        restrict: 'AE',
        replace: true,
        template: '<li style="height:{{val.b}}%" >{{val.a}}</li>',
        link: function(scope, elem, attrs) {
    }
  };
});

function MyCtrl($scope) {
    $scope.values= [{a:"Doe",b:10},{a:"bom",b:20},{a:"kal",b:30},{a:"jijo",b:40}];
}

fiddle : http://jsfiddle.net/HB7LU/12044/