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樣式不更新寬度和高度

回答

相關問題