Question

我是Angular.js的新手（更多的是CSS / jQuery家伙），我无法弄清楚为什么我的ng-repeat没有工作;我已经完成了CodeSchool的所有视频教程，并认为我有Angular-down-背后的基础知识，但是......这不是重复。完全没有。事实上，我认为没有任何Angular命令可行。我不能让ng-href更新，我不能用风格来制作风格，而这一切都只是一团糟。将静态样式应用于我不知道的Angular元素时是否存在问题？我皇室搞砸了吗？

这是我的悲惨因素：

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风格出现错误，你可以使用风格。

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

您应该尝试在浏览器中使用调试器。会帮到很多，看看吧！

Answer 2

在这里：http://plnkr.co/edit/KtBPeIWX00h37YcssODZ?p=preview

我刚刚对它进行了重新编码，因为语法有点混乱。一些事情：

对于Angular，请尝试使用Plunker使用和为AngularJS

https://github.com/olov/ng-annotate

我选择了不同的路线并添加了一个图像元素以进行更清晰的装订
所有控制器都需要$scope参数
为了改善语法，请习惯使用数组作为控制器参数： app.controller('MainCtrl', ['$scope`, function($scope){};

这可以防止在缩小时发生错误。一个很好的资源是[ng-annotate}（{{3}}）资源。

希望这一切都有帮助！祝你好运！

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

2 个答案: