修改角陣對象onload

背景：我使用Bootstrap的breadcrumb輸出/ some/path/to/my/file。要確保麪包屑停留在頁面寬度內，我想比較麪包屑文本的長度和容器的寬度。如果文本的寬度超過容器，我將修改麪包屑數據數組直到它適合，即/ .../to/file修改角陣對象onload

由於麪包屑數據存在於數組中，並且在頁面中沒有硬編碼，因此無法測量文本的寬度直到頁面已完全加載。

我會用<body onload="widthChecker()">但這不適用於Angular，我不相信ng-init也可以。

這是到目前爲止我的代碼...

var folderArray = [{ 
 
    folder: 'the quick brown fox jumps over the lazy dog' 
 
}, { 
 
    folder: 'the quick brown fox jumps over the lazy' 
 
}, { 
 
    folder: 'the quick brown fox jumps over the' 
 
}, { 
 
    folder: 'the quick brown fox jumps over' 
 
    }, { 
 
    folder: 'the quick brown fox jumps' 
 
}];  
 
    
 
(function() { 
 
    var app = angular.module('myApp', []); 
 

 
    app.controller('AppController', function() { 
 
    this.files = folderArray; 
 
    }); 
 

 
})(); 
 

 
function checkWidths() { 
 

 
    var cWidth = document.getElementById("breadcrumb-container").offsetWidth; 
 
    var tWidth = document.getElementById("breadcrumb-container").scrollWidth; 
 
    
 
/* 
 
    while (tWidth > cWidth) { 
 
    
 
    Condense objects in folderArray into ellipsis until the breadcrumb fits 
 
    
 
    } 
 
*/ 
 
}

#breadcrumb-container { 
 
    width: 100%; 
 
white-space:nowrap; 
 
} 
 

 
.breadcrumb { 
 
    display: table; 
 
} 
 
\t \t \t \t \t 
 
.breadcrumb li { 
 
    display: table-cell; 
 
}

<!doctype html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
    
 
<body ng-controller="AppController as box" onload="checkWidths();"> 
 
    
 
<div id="breadcrumb-container"> 
 
    <ol class="breadcrumb"> 
 
    <li ng-repeat="file in box.files"><a href="#">{{ file.folder }}</a></li> 
 
    </ol> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

來源

2016-04-14 Daniel Williams

-1

我會用但這不會與角工作，我不相信NG-INIT也可以工作。

這是不正確的。您可以使用下面的代碼，例如，以訪問範圍和調用一個函數角度

var scope = angular.element(document.getElementById('someId')); 
scope.condense_objects();

...其中condense_objects是檢查寬度，直到它符合

更新陣列功能

來源

2016-04-14 04:42:59

感謝您的建議。你能幫助我，因爲我不確定如何處理代碼。 –

修改角陣對象onload

回答

相關問題