0

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;
    };});
2
  • Take a look at this question. Commented Jan 5, 2016 at 7:19
  • @Goldenowner That was it, thank you so much! Commented Jan 5, 2016 at 8:32

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.