Angular JS no-repeat与背景图片不起作用

我是Angular.js（更多CSS/jQuery人）的新手，我无法弄清楚为什么我的ng-repeat不工作;我已经完成了CodeSchool的所有视频教程，并且认为我拥有Angular-down背后的基础知识 - 但是......这不是重复的。完全一样。事实上，我认为没有一个Angular命令会起作用。我无法获得ng-href的更新，我无法获得ng样式的风格，而这只是一团糟。将静态样式应用于我不知道的Angular元素时是否存在问题？我是否真的搞砸了一些东西？Angular JS no-repeat与背景图片不起作用

这里是我的什么原因造成了我这么多的悲伤的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>

我哪里错了？

来源

2014-10-08 sarsparillo

我没有花足够的时间调试所有内容，但是您的小提琴配置不正确。首先，你已经设置好了运行onLoad。 Angular需要'无包装'选项之一。其次，您选择了不支持'controller as'语法的Angular 1.1。你应该使用2.1代替。 – 2014-10-08 19:29:01

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

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

你应该尝试使用调试器在浏览器中。会帮助很多，检查出来！

来源

2014-10-08 19:43:27

谢谢 - 这给了我一些东西来解构，是的，我没有意识到我设置了那个小提琴的多么糟糕。它在我想现在正确运行这个页面的页面上工作;我所要做的就是配置Colorbox（甚至制作Angular版本），然后设置好。谢谢！ – sarsparillo 2014-10-08 20:16:19

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

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

对于角度，尝试使用Plunker它的建成与和AngularJS
我走了不同的路线，并添加了清洁剂结合
所有控制器都需要一个$scope参数的图像元素
为了改善语法，习惯使用数组作为控制器参数： app.controller('MainCtrl', ['$scope`, function($scope){};

这个w在需要缩减时防止错误发生。一个很好的资源是[ng-annotate}（https://github.com/olov/ng-annotate）资源。

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

来源

2014-10-08 20:21:02 caseybaggz

Angular JS no-repeat与背景图片不起作用

回答

相关问题