背景：我正在使用Bootstrap的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;
}
.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>
答案 0 :(得分：-1)
我会使用，但这不适用 Angular，我不相信ng-init也可以。
事实并非如此。例如，您可以使用以下代码来访问范围并调用Angular函数
{% comment %}ly_global_begin{% endcomment %}{% include 'ly-global' %}{% comment %}ly_global_end{% endcomment %}
{% assign found_a_collection = false %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'all-products' and c.handle != 'frontpage' and c.handle != 'all' %}
{% assign found_a_collection = true %}
{% assign coll = c %}
{% endif %}
{% endfor %}
{% else %}
{% assign found_a_collection = true %}
{% assign coll = collection %}
{% endif %}
{% if found_a_collection and coll.products.size > 1 %}
<div id="related" class="{% if settings.mobile_related_items %}hide-mobile{% endif %} clearfix">
<h3>{% comment %}ly_i18n_replace_for_[ 'products.general.related_items' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.general.related_items' | t }}{% endcapture %}{% include 'ly-static-string' with '1413610' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</h3>
{% assign max_items = '' %}
<ul class="block-grid columns4 collection-th">
{% for prd in coll.products %}
{% if prd.handle != product.handle and max_items != '****' %}
<li>
<a class="prod-th" title="{% comment %}ly_code_replace_for_[ prd.title | escape ]_begin{% endcomment %}{% include 'ly-title' with prd %}{% assign c7cdd42304af0cf1669bffa56a709695 = ly_translation %}{{ c7cdd42304af0cf1669bffa56a709695 | escape }}{% comment %}ly_code_replace_end{% endcomment %}" href="{{ prd.url }}">
<span class="thumbnail">
<img alt="{{ prd.images.first.alt | escape }}" src="{{ prd.images.first | product_img_url: 'medium' }}">
</span>
<span class="product-title">
<span class="title">
{% comment %}ly_code_replace_for_[ prd.title | escape ]_begin{% endcomment %}{% include 'ly-title' with prd %}{% assign c7cdd42304af0cf1669bffa56a709695 = ly_translation %}{{ c7cdd42304af0cf1669bffa56a709695 | escape }}{% comment %}ly_code_replace_end{% endcomment %}
</span>
<span class="price{% unless prd.available %} sold-out{% endunless %}">
{% if prd.available %}
{% if prd.compare_at_price > prd.price %}
<del>{% assign geolizr_price = prd.compare_at_price %}{% include 'geolizr-currency' with geolizr_price %}{{prd.compare_at_price | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}</del> {% assign geolizr_price = prd.price %}{% include 'geolizr-currency' with geolizr_price %}{{prd.price | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}
{% else %}
{% if prd.price_varies %}<small>{% comment %}ly_i18n_replace_for_[ 'products.general.from' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.general.from' | t }}{% endcapture %}{% include 'ly-static-string' with '1413611' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</small> {% endif%}{% assign geolizr_price = prd.price %}{% include 'geolizr-currency' with geolizr_price %}{{prd.price | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}
{% endif %}
{% else %}
{% comment %}ly_i18n_replace_for_[ 'products.product.sold_out' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.sold_out' | t }}{% endcapture %}{% include 'ly-static-string' with '1413612' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
{% endif %}
</span>
</span>
{% if prd.compare_at_price > prd.price %}
{% if settings.show_sale_sticker %}
<span class="sale round">{% comment %}ly_i18n_replace_for_[ 'products.general.sale' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.general.sale' | t }}{% endcapture %}{% include 'ly-static-string' with '1413613' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</span>
{% endif %}
{% endif %}
</a>
</li>
{% capture max_items %}{{max_items}}*{% endcapture %}
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
...其中condense_objects是检查宽度并更新数组的函数，直到它适合