javascript - Angular JS 不重复背景图像不起作用

Question

我是 Angular.js 的新手(更像是一个 CSS/jQuery 的家伙)，我不明白为什么我的 ng-repeat 不起作用；我已经完成了 CodeSchool 上的所有视频教程，并认为我掌握了 Angular 背后的基础知识，但是......这不再重复。完全没有。事实上，我认为有用的 Angular 命令都没有。我无法让 ng-href 进行更新，我无法让 ng-style 进行样式化，这一切都是一团糟。将静态样式应用于我不知道的 Angular 元素时是否存在问题？我是不是真的搞砸了什么？

这是我的 jsfiddle 是什么让我如此悲伤:

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

这是我正在使用的 HTML，其余部分显然已经过时了:

<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>

我哪里错了？

Answer 1

有几处错误，但主要问题是您的脚本未按正确顺序加载。

从“onLoad”更改为“No warp - in”，您会看到一些新错误。

您还应该将 this.instances = pieces; 移动到您定义片段的下方。

然后你的 ng-style 有错误，你可以直接使用 style。

我纠正了你的 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;
});

您应该尝试在浏览器中使用调试器。会有很大帮助，看看吧!