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?

Answer 1

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!

Answer 2

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!