0
背景：私はブートストラップのbreadcrumbを使用して/ some/path/to/my/fileを出力しています。ブレッドクラムがページの幅内に収まるように、ブレッドクラムテキストの長さとそのコンテナの幅を比較したいと思います。テキストの幅がコンテナを超えている場合、私はブレッドクラムのデータ配列が収まるまで変更します。つまり、/ .../to/file角度アレイオブジェクトのオンロードを変更する
です。パンくずリストのデータは配列内に存在し、ページ内にハードコードされていないため、ページが完全に読み込まれるまでテキストの幅。
私は<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>
提案していただきありがとうございます。コードをどうすればいいのか分からないので、助けてくれますか？ –