使用Foundation for Apps，控制器出现问题，ng重复出现
Using Foundation for Apps, trouble with controller and ng-repeat
问题
第一次使用Foundation for Apps创建Angular应用程序时，我不清楚应该将新模块放在哪里，是放在client/assets/js/app.js中还是放在单独的文件中。
现在，我正试图使用我在client/templates/home.html中声明的ng-rerepeat和ing-controller从$scope.business =获取数据，以显示在页面上，但我只得到{{business.name}}｝和错误Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
client/templates/home.html(包含在index.html中(
---
name: home
url: /
---
<div class="grid-container">
<div class="hero">
<p class="sponsor">Sponsored by </p>
<img src="http://placehold.it/200x30" class="sponsors" alt="">
<h1>Business Directory</h1>
<div class="find">
<label for="looking">
<i class="fa fa-search"></i>
</label>
<input type="search" id="looking" placeholder="What are you looking for?">
<input type="submit">
</div><!-- /.find -->
<ul>
<li class="popular">Popular searches:</li>
<li>tk-category <span>|</li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category </li>
</ul>
</div><!-- /.hero -->
<div class="businesses">
<p class="number">tk-number of businesses</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
<div class="options">
<div class="cat">
<p>Category</p>
<div class="categories">
<div class="group">
<p class="name">Grade Level</p>
<div class="check">
<input type="radio" name=""><p>Auto</p>
<input type="checkbox" name=""><p>Restaurant</p>
<input type="checkbox" name=""><p>Other</p>
</div><!-- /.check -->
</div><!-- /.group -->
<div class="group">
<p class="name">School Type</p>
<div class="check">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div><!-- /.check -->
</div><!-- /.group -->
</div><!-- /.categories -->
</div><!-- /.cat -->
</div><!-- /.options -->
</div><!-- /.businesses -->
<div class="buttons">
<button class="alp">Alphabetically</button>
<button class="exp">Expanded</button>
<button class="con">Condensed</button>
</div><!-- /.buttons -->
<div class="grid-block small-up-3" ng-controller="MainCtrl">
<div class="grid-block" ng-repeat="business in businesses">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
<a href="" class="website">{{business.website}}</a>
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
<a href="" class="website">{{business.website}}</a>
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
<a href="" class="website">{{business.website}}</a>
</div>
</div>
</div>
index.html
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brandon Sun Business Directory</title>
<link href="/assets/css/app.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink" style="padding: 0;">
<div class="primary condense menu-bar">
<div class="logo">
<img src="http://placehold.it/80x45" class="bdnsun" alt="">
<div class="social">
<a href="" class="click"><i class="fa fa-twitter"></i></a>
<a href="" class="click"><i class="fa fa-facebook"></i></a>
</div><!-- /.social -->
</div><!-- /.logo -->
</div>
</div>
<div ui-view class="grid-content">
</div>
</div>
<script src="/assets/js/foundation.js"></script>
<script src="/assets/js/templates.js"></script>
<script src="/assets/js/routes.js"></script>
<script src="/assets/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
</body>
</html>
app.js
(function() {
'use strict';
angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', ['$scope', function($scope) {
$scope.business = [
{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}
]
}]);
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
})();
演示：http://plnkr.co/edit/Xuay1WtTbdMBmHXEq1R7?p=preview
JS：
var myApp = angular.module('application',[]);
myApp.controller('MainCtrl', function($scope) {
$scope.businesses = [
{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}
]
});
将ng-app="application添加到body标记中。你的JS文件中有一个拼写错误。它应该是$scope.businesses而不是$scope.business，因为在HTML中ng-repeat="business in businesses"将在businesses上迭代，并将每个对象分配给business(别名(以用于提取数据。
更新-根据Github代码，如上所述编辑以下文件：
app.js
'use strict';
var myApp = angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
从index.html文件中删除<script src="/assets/js/scripts.js"></script>。
scripts.js
myApp.controller('MainCtrl', function($scope) {
$scope.businesses = [
{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}
]
});
在gullfile.js中，按照以下方式修改行：
// These files are for your app's JavaScript
appJS: [
'client/assets/js/*.js'
]
*.js* will copy all the js files in the build folder, the errors you were getting were because your scripts.js file wasn't copy in the build and therefore MainCtlr`未定义。
希望它现在对你有效。
相关文章：
- ng绑定和ng href问题.ng href未从控制器加载数据
- ng include导致角度问题
- 将输入值设置为ng模型属性[Angular]时出现问题
- 绑定的角度ng-max问题
- 使用ng-include渲染Angular模板时出现问题
- 使用 ng 模型获取数据时遇到问题
- Angularjs ng-options 问题仅适用于 Chrome 浏览器
- Angular2 ng if有什么问题
- 在我的HTML中用ng-init初始化$scope变量时出现问题
- 使用ng repeat实现firebaseArray时遇到问题
- 嵌套ng包含的角度问题
- AngularJS-$routeProvider和数据ng视图的问题
- 日期选择器的ng更改问题
- 使用ng repeat添加多个视图实例时的范围界定问题
- 角度:多个 ng 假设问题
- 使用 ng 重复的网格问题
- 在 AngularJS 中使用 ng-repeat 渲染 HTML 值时出现问题
- AngularJS ng-pattern的正则表达式问题
- NG重复角度“2层”JSON问题
- 数据的角度问题 -ng-init
