Angular JS no-repeat with background images not working

Question

I'm new to Angular.js (more of a CSS/jQuery guy) and I can't work out why my ng-repeat isn't working; I've done all the video tutorials on CodeSchool and thought I had the basics behind Angular -down- but... this isn't repeating. At all. In fact, none of the Angular commands I thought would work are. I can't get ng-href to update, I can't get ng-style to style, and it's all just a mess. Is there an issue when applying static styles to Angular elements I don't know about? Have I royally screwed up something?

Here's my jsfiddle of what is causing me so much grief:

http://jsfiddle.net/8s8vcdxr/6/

Here's the HTML I'm using, and the rest is obviously over on the fiddle:

<div ng-app="thisWebsite">
    <div class="column" ng-controller="myController as control">
        <section class="links" 
          ng-repeat="instance in control.instances" 
          ng-style="'background':'url(' + {instance.imageUrl} + ') no-repeat;'"> 
            <a ng-href="{{instance.pageLink}}">
                <div class="link_overlay"> {{instance.title}} </div>
            </a>
        </section>
    </div>
</div>

Where am I going wrong?

I didn't take enough time to debug everything, but your Fiddle is configured improperly. First of all, you have it set up to run onLoad. Angular needs one of the 'no wrapper' options. Second, you selected Angular 1.1 which doesn't support 'controller as' syntax. You should be using 2.1 instead. — Justin Niessner
– Justin Niessner, Commented Oct 8, 2014 at 19:29

Richard Löwenström · Accepted Answer · 2014-10-08 19:43:27Z

There are a couple of things wrong but the main problem is that your scripts aren't loading in the correct order.

Change from 'onLoad' to 'No warp - in ' and you'll see some new errors.

You should also move this.instances = pieces; to below where you define pieces.

Then there's an error in your ng-style and you can just use style.

I corrected your fiddle: http://jsfiddle.net/8s8vcdxr/8/

HTML

<div ng-app="thisWebsite">
    <div class="column" ng-controller="myController as control">
        <div class="links" 
            ng-repeat="instance in control.instances" 
            style="background: url({{instance.imageUrl}}) no-repeat;"> 
                <a ng-href="{{instance.pageLink}}">
                    <div class="link_overlay"> {{instance.title}}</div>
                </a>
        </div>
    </div>
</div>

javascript

angular.module('thisWebsite', [])

.controller('myController', function () {

    var pieces = [{
        pageLink: 'http://www.google.com',
        imageUrl: 'http://scitechdaily.com/images/Hubble-Space-Telescope-Image-of-Spiral-Galaxy-Messier-77-120x120.jpg',
        title: 'monster truck'
    }, {
        pageLink: 'http://www.yahoo.com',
        imageUrl: 'http://scitechdaily.com/images/new-image-of-the-Helix-nebula-120x120.jpg',
        title: 'not google'
    }, {
        pageLink: 'http://www.stackoverflow.com',
        imageUrl: 'http://www.eva.mpg.de/neandertal/press/presskit-neandertal/images/Image8_thumb.jpg',
        title: 'help please'
    }, {
        pageLink: 'http://jsfiddle.net',
        imageUrl: 'http://scitechdaily.com/images/Hubble-Space-Telescope-Image-of-Spiral-Galaxy-Messier-77-120x120.jpg',
        title: 'why no work'
    }];

    this.instances = pieces;
});

You should try using the debugger in your browser. Will help a lot, check it out!

Thank you - this has given me something to deconstruct, and yeah, I didn't realize just how badly I'd set up that fiddle. It works on the page I wanted to run this on properly now; all I gotta do is get to configuring Colorbox (or even making an Angular version) and I'm set. Thank you!

caseybaggz · Accepted Answer · 2014-10-08 20:21:02Z

0

Here you go: http://plnkr.co/edit/KtBPeIWX00h37YcssODZ?p=preview

I just re-coded it because the syntax was a little messy. A few things:

For Angular, try using Plunker it's built with and for AngularJS
I went a different route and added an image element for cleaner binding
All controllers require a $scope argument
For the betterment of your syntax, get used to using arrays for your controller arguments: app.controller('MainCtrl', ['$scope`, function($scope){};

This will prevent errors from happening when it's time to minify. A good resource for this is the [ng-annotate}(https://github.com/olov/ng-annotate) resource.

Hope all that helps! Good luck!

answered Oct 8, 2014 at 20:21

caseybaggz

1071 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular JS no-repeat with background images not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related