Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I'm just getting starting with Angular, so everything is still a bit new to me.

What's happening right now is that this works in the sense that my HTML gets changed when I switch categories on my gallery navigation. However, once the HTML gets changed, I get this error from Bootstrap:

Cannot read property of 'offsetWidth' of undefined

I have a suspicion that this is because in the split second its rebinding the new data, there's nothing there isn't a width for Bootstrap to build the carousel hence the error. Unfortunately I don't have any ideas for how to get around this...


Currently this is how I have my code set up, any help would be appreciated!:

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 (sorry for the poor indentation :( )

<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;
    };});
share|improve this question
    
Take a look at this question. – Goldenowner 15 hours ago
    
@Goldenowner That was it, thank you so much! – Daniel Huang 14 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.