ng样式不更新宽度和高度

我试图创建一些自动调整大小的圆圈。问题是ng样式属性没有更新样式。 http://plnkr.co/edit/3HxSzWIyUsLUW6UwFlRR看到plunkerng样式不更新宽度和高度

的Javascript：

$scope.sellingPoints = { 
    '1':{ 'text':'Newest Technologies'}, 
    '2':{ 'text':'Rapid Development'}, 
    '3':{ 'text':'Scaleable Solutions'}, 
    '4':{ 'text':'Custom CMS'} 
}; 

$scope.kpi = {}; 
$scope.sizes = {}; 
$scope.onResize = function() { 
    console.log('joe'); 
    var kpifit = document.getElementById('fit'); 
    $scope.sizes.width = kpifit.offsetWidth - 30; 
    $scope.kpi.width = $scope.sizes.width + 'px'; 
    $scope.kpi.height = $scope.sizes.width + 'px'; 
    console.log($scope.sizes.width); 
} 

angular.element($window).bind('resize', function() { 
    $scope.onResize(); 
}) 
$timeout(function() { 
    $scope.onResize(); 
}, 300);

HTML：

<div class="row no-margin"> 
    <div class="col-md-3 col-xs-6" id="fit" ng-repeat="item in sellingPoints"> 
     <div class="kpi" ng-style="{'width':kpi.width,'height':kpi.height}"> 
      <div class="kpi-text">{{item.text}}</div> 
     </div> 
    </div> 
</div>

来源

2015-05-22 Sjoerd de Wit

此代码是否在指令内？或在一个正常的页面？如果它在页面中，我认为你应该按照这个顺序调用controllerName.kpi.width。 –

处理程序与angular.element.prototype.bind（和on）方法势必不会触发自身消化。所以，你需要做手工：

angular.element($window).bind('resize', function() { 
    $scope.onResize(); 
    $scope.$apply(); 
});

演示：http://plnkr.co/edit/dPphd7KkQC7jNqleEgHb?p=info

来源

2015-05-22 08:37:05 dfsq

owsm stuff :) .. –

如果你想使用的功能

在ng-style宽度值这个例子下面是使用进度条图。

$scope.ChartDataList = [{ 
     Ch_Name: 'Document', 
     Ch_Percentage: '40%', 
     getMaxLength() { 
      return '40%'; 
     } 
    }, { 
     Ch_Name: 'Video/Audio', 
     Ch_Percentage: '66%', 
     getMaxLength() { 
      return '66%'; 
     } 
    } 
}]

来源

2016-07-21 15:19:17 GirishBabuC

花点时间阅读帮助中心的[编辑帮助]（// stackoverflow.com/editing-help）。堆栈溢出的格式与其他站点不同。 – FrankerZ

ng样式不更新宽度和高度

回答

相关问题