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

小提琴： http://jsfiddle.net/HB7LU/12044/

以角度方式删除视图属性中的空间

1 个答案: