Angular 1.4.7 ng-repeat答案

【问题标题】：Angular 1.4.7 ng-repeatAngular 1.4.7 ng-repeat
【发布时间】：2016-03-13 16:35:10
【问题描述】：

我遇到了ng-repeat 的问题，在哪里引发了注入错误。我不是高级 Angular 开发人员，也许是新手。但我知道这在某一时刻有效，然后就噗嗤一声。走了！

我做了什么不同的事情？我将 localhost 路径更改为 Angular 到 CDN。我在我最初复制这项工作的模板中对其进行了测试，它在那里工作。但不在我的网站上。

我的 HTML：

<div id="cbp-vm" class="activegrid">
      <ul id="product" class="nav-pills nav-stacked rectangle-list" ng-controller="dataImagesWork">
          <li class="col-md-4 my-gallery-animation-home3" ng-repeat="product in images_work | filter:myFilter">
              <img ng-src="../img/projects/{{product.src}}" alt="{{product.name}}" /><br />
              <label class="title" href=""> {{product.name}} </label>
              <a class="btn btn-lg btn-primary pull-right" href="{{product.link}}" target="_blank" rel="nofollow">View</a>
          </li>
      </ul>
</div>

我的控制器：

app.controller("dataImagesWork", function ($scope) {
$scope.images_work = [
      {
          "name": 'PA Liquor Control Board',
          "src": "Liquor-Control-Board340.png",
          "link": "http://www.finewineandgoodspirits.com/webapp/wcs/stores/servlet/StoreCatalogDisplay?storeId=10051&catalogId=10051&langId=-1"
      },
      {
          "name": 'PA Provider Self Service',
          "src": "Provider-Services-of-PA340.png",
          "link": 'https://www.pelican.state.pa.us/provider/default.aspx?TYPE=33554433&REALMOID=06-ccc2a1cb-0683-440f-bfa6-cad042af12ba&GUID=&SMAUTHREASON=0&METHOD=GET&SMAGENTNAME=-SM-ZW9pIAMntaN%2bR%2fAG5q4UUzXVDz%2bKoMG2pXXJCs1re8tkRKCZKtgqJypoW9Af5ilo&TARGET=-SM-https%3a%2f%2fwww%2epelican%2estate%2epa%2eus%2fprovider%2fui%2fhome%2easpx#'
      },
      {
          "name": 'Job Gateway',
          "src": "JobGateway340.png",
          "link": 'https://www.jobgateway.pa.gov/jponline/Admin/Common/Portal.aspx?w@cIRFbHc_kyIfEUDPqYpUspb3u_@dnsvVOXen8isTEcdYg4grazpGUr2rtw4QN@odjSSGi8RwBm4_nraX__ITaRZJT8HYWbn3TgGPFcA0A-6xUQEkG_y@pHEMFmjDEEwSppJHEDfIGrVG6yQ4mCf4aazFA4QpEE'
      },
      {
          "name": 'Keystone Canine Rescue',
          "src": "KeystoneCanineRescue340.png",
          "link": 'http://www.keystonecaninerescue.org/'
      }];
 });

这是错误：

错误：[$injector:unpr] http://errors.angularjs.org/1.4.7/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-NaNataImagesWork
在错误（本机）
在https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:6:416
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:40:409
在 Object.d [作为 get] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:38:394)
在 https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:40:483
在 d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:38:394)
在 Object.e [作为调用] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:39:161)
在 P.instance (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:80:207)
在 K (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:61:190)
在 g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:54:410)

任何帮助将不胜感激

如果有帮助，这里是CODEPEN

【问题讨论】：

它会为您提供所有错误信息：“模块 'uiGmapgoogle-maps' 不可用！”。只需通过添加/删除必要的模块来修复它。

标签： angularjs

【解决方案1】：

您没有加载uiGmapgoogle-maps 模块文件，
从您的 Angular 模块依赖项中删除 uiGmapgoogle-maps 将解决此问题。

var app = angular.module('angula', ['ngRoute', 'ui.bootstrap', 'ngAnimate', 'ngMaterial']);

此外，您没有附加过滤器文件，因此您需要从 ngRepeat 中删除过滤器。

<li class="col-md-4 my-gallery-animation-home3" ng-repeat="product in images_work">

查看工作示例：http://codepen.io/anon/pen/BKLdyP?editors=1011

【讨论】：

很奇怪。在代码笔中，它显然有效。但是在我的应用程序中替换代码后，它仍然显示相同的错误。你能想到另一个依赖项吗？删除谷歌地图会阻止角谷歌地图的工作，但我一直在考虑将其替换为另一个，所以那个没有什么大问题。
@LOTUSMS 你是否也从 ngRepeat 中删除了过滤器
是的，先生！我读到错误，它说所需的依赖没有解决。不确定是否必须在其他地方或类似的地方声明 dataImagesWork。我仍在尝试了解 Angular 基础架构
一般情况下就是你已经加载的某个模块无法加载了，试着把除了ngRoute之外的所有模块都去掉，看看是否有效
它没有。我也没有运气就更改为不同的 jquery 版本。你认为更现代的 Angular 版本会解决问题吗？我想我可以试试...编辑-不，v1.50 也没有修复它

【解决方案2】：

移除模块依赖的“uiGmapgoogle-maps”
带有数据绑定的链接，必须使用ng-href，替换href
我建议按照preparation guide for angular 2. 和 Jhon Papa 的 Angular 风格指南编写您的 Angular 应用程序

【讨论】：