我刚开始使用Angular,所以对我来说一切都还有点新鲜。
现在发生的事情是,当我在图库导航中切换类别时,我的HTML会发生变化。但是,一旦HTML发生变化,我就会从Bootstrap中得到这个错误:
Cannot read property of 'offsetWidth' of undefined
我怀疑这是因为在瞬间重新绑定新数据,没有任何东西没有Bootstrap构建轮播的宽度因此错误。不幸的是,我对如何解决这个问题没有任何想法...
目前这就是我设置代码的方式,任何帮助都会受到赞赏!:
的index.html
<div class="container page" ng-controller="GalleryNavigation as nav">
<!--Gallery Navigation: changes what image sources to load on click-->
<div id="gallery-nav">
<ul class="col-md-1">
<li ng-class="{active:nav.isSelected(1)}">
<a href ng-click="nav.selectSection(1)">01. print</a>
</li>
<li ng-class="{active:nav.isSelected(2)}">
<a href ng-click="nav.selectSection(2)">02. web</a>
</li>
<li ng-class="{active:nav.isSelected(3)}">
<a href ng-click="nav.selectSection(3)">03. video</a>
</li>
</ul>
</div>
<!-- Wrapper for slides -->
<div class="gallery-wrapper">
<!--All artwork loaded when clicked; refer to app.js for work directive-->
<work></work>
</div>
</div>
</div>
print.html(抱歉可怜的缩进:()
<div class="carousel-inner" role="listbox">
<!--filter by library type selected in the gallery navigation bar-->
<div class="item real" ng-repeat="slide in nav.slides | filter:nav.currLibrary">
<img ng-src="{{slide.image}}" alt="..." class="image">
<div class="carousel-caption">
{{slide.title}}
</div>
</div>
</div>
app.js
//Controller for Gallery Navigation
app.controller('GalleryNavigation',function(){
this.section="1";
this.slides=Library;
this.currLibrary="print";
this.selectSection=function(setSec){
this.section=setSec;
if(setSec==1){
this.currLibrary="print";
}
if(setSec==2){
this.currLibrary="web";
}
console.log(this.slides);
};
this.isSelected=function(checkSec){
return this.section==checkSec;
};});