Angular JS不重复背景图像不工作

Angular JS no-repeat with background images not working

本文关键字：图像 工作 背景 JS Angular      更新时间：2023-09-26

我是Angular.js的新手（更像是CSS/jQuery），我不知道为什么我的ng repeat不起作用；我已经在CodeSchool上完成了所有的视频教程，并认为我已经掌握了Angular-down背后的基础知识，但。。。这不会重复。完全事实上，我认为可以工作的Angular命令都不是。我无法更新ng href，无法将ng样式转换为样式，一切都一团糟。将静态样式应用于我不知道的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>

我哪里错了？

有一些错误，但主要问题是脚本加载顺序不正确。

从"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;
});

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

开始：http://plnkr.co/edit/KtBPeIWX00h37YcssODZ?p=preview

我只是重新编码了一下，因为语法有点乱。几件事：

  • 对于Angular，请尝试使用它与AngularJS一起构建的Plunker
  • 我走了另一条路，添加了一个图像元素来进行更清洁的装订
  • 所有控制器都需要$scope参数
  • 为了改进语法，请习惯于使用数组作为控制器参数： app.controller('MainCtrl', ['$scope`, function($scope){};

这将防止在缩小时发生错误。一个很好的资源是[ng-annotation}(https://github.com/olov/ng-annotate)资源。

希望所有的帮助！祝你好运

相关文章：