我讨厌提出新问题，事实上这是我第一次相信，但你可以接受我的话，我尽力找到答案而不依靠你们。
这是非常直接的，构建我的第一个愚蠢的Angular JS应用程序但似乎在我的手上有一些语法错误，因为我可以告诉一切似乎是正确的。简单地试图通过一个简单的工厂来回归一些数据，但我甚至不能这样做：，（
问题在于menuService，它在service.js文件中，它只是通过工厂返回一个数组，但我告诉它是未定义的。
TypeError：无法读取未定义的属性“getData” 在新的（app.js：49）
第49行是我指定$ scope.menuItems = menuService.getData;
的地方谢谢！
我的index.html：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jan Michael Vincent</title>
<meta name="description" content="A sample Angular app featuring Jan Michael Vincent">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<script src="bower_components/angular/angular.js"></script>
<link href="bower_components/bootstrap/bootstrap.css" rel="stylesheet" type="text/css">
<link href="app.css" rel="stylesheet" type="text/css">
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="service.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="JMV">
<!-- HEADER -->
<div class="header" ng-controller="mainController">
<img class="header_logo" ng-src="{{title.logo}}">
<h1>{{title.value}} {{title.total+1}}</h1>
</div>
<!-- ALERTS -->
<div class="alerts">
<div ng-controller="alertController">
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
</div>
</div>
<!-- ----- CONTENT & SIDEBAR ----- -->
<div class="section">
<div class="container">
<div class="row">
<!-- SIDEBAR -->
<div class="col-md-3" ng-controller="menuController">
<h3 ng-repeat="item in menuItems"> <a href src="{{item.link}}"> {{item.name}} </a> </h3>
</div>
<!-- CONTENT -->
<div class="col-md-9" ng-controller="contentController">
<div class="row">
<h2> Our Team of Developers </h2>
</div>
<div class="row">
<div class="col-md-3" ng-repeat="member in teamMembers">
<img src="{{member.img}}" class="center-block img-circle img-responsive">
<h3 class="text-center">{{member.name}}</h3>
<p class="text-center">{{member.title}}</p>
</div>
</div>
<p ng-if="myBool">{{content.value}}</p>
<button ng-click="myBool=!myBool">Tog-L</button>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
</body></html>
我的app.js：
'use strict';
angular.module('JMV', [
'ui.bootstrap',
'serv'
])
.controller('mainController', function($scope){
$scope.title={};
$scope.title.value="Jan Michael Vincent";
$scope.title.logo="img/logo.png";
$scope.title.total=2999;
})
.controller('contentController', function($scope){
$scope.myBool = true;
$scope.content={};
$scope.content.value="First Content Butch";
$scope.content.date="21/04/16";
function toggleOn () {
if (myBool) {
myBool = false;
} else {
myBool = true;
}
};
$scope.teamMembers = [
{
'name' : "Tiny Rick",
'img' : "img/rick.jpg",
'title' : "Science guy"
},
{
'name' : "Morty",
'img' : "img/morty.jpg",
'title' : "Loon"
},
{
'name' : "Jerry",
'img' : "img/jerry.jpg",
'title' : "Employee"
}
];
})
.controller('menuController', [
'menuService',
function($scope, menuService){
$scope.menuItems = menuService.getData;
}])
.controller('alertController', function ($scope) {
$scope.alerts = [
//{ type: 'danger', msg: 'Accept our Cookie Policy or GTFO!' },
{ type: 'danger', msg: 'You are not logged in!' }
];
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
我的service.js：
(function() {
'use strict';
angular.module('serv', [])
.factory('menuService', menuService);
function menuService () {
var service = {
getData: getData,
putData: putData
}
return service;
//////
function getData() {
return [{
'name' : 'Home',
'link' : 'index.html'
},
{
'name' : 'About',
'link' : 'about.html'
},
{
'name' : 'Contact',
'link' : 'contact.html'
}];
}
function putData() {
//TODO
}
};
})();
任何帮助都会受到大力赞赏，一旦我能够理解我在这里做错了什么我应该远离它。非常感谢提前：D
<磷>氮答案 0 :(得分：1)
代码中的问题与依赖注入有关。
使用Inline Array Annotation将组件注入控制器时，首先提供一个字符串依赖项名称列表，然后是函数声明，它接受与数组完全相同的参数数量，顺序完全相同。 / p>
在您的代码中，您有：
.controller('menuController', [
'menuService',
function($scope, menuService){
此声明有一个字符串值，但有两个函数参数。这些不同步。实际上，这会将$scope设置为等于您的'menuService'对象，并且menuService将是未定义的，并且两者都不会以您期望的方式执行。
要更正此问题，请确保参数列表和实际参数同步：
.controller('menuController', [
'$scope', 'menuService',
function($scope, menuService){
答案 1 :(得分：-1)
你走了。我懒得在你的代码中找到错误。而不是那样做，我会发布一些我知道可行的项目的代码。看看您是否可以对其进行反向工程以使用您的代码。我建议一次一步地从代码中删除任何无用的东西。直到它运行。
'use strict';
//define module and dependencies to other modules
angular.module('MyModule', ['pascalprecht.translate', 'ngAnimate', 'ui.bootstrap']);
//define translations
angular.module('MyModule').config(function ($translateProvider) {
$translateProvider.translations('en', {
HEADLINE: 'Hello there, This is my awesome app!',
INTRO_TEXT: 'And it has i18n support!'
});
$translateProvider.translations('de', {
HEADLINE: 'Hey, das ist meine großartige App!',
INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
});
$translateProvider.translations('sv', {
HEADLINE: 'Hejsan detta är min awesome app!',
INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
});
//$translateProvider.preferredLanguage('de');
//$translateProvider.preferredLanguage('en');
$translateProvider.preferredLanguage('sv');
});
//define services
angular.module('MyModule').service('TabService', ['$log', function ($log) {
//fetches the url of the current window and active tab
this.requestCurrentTabData = function (callback) {
if (!chrome.tabs) {
$log.error("chrome.tabs api is only available when running as a browser extension");
return callback("request error");
}
chrome.tabs.query({ active: true, currentWindow: true }, function (result) {
var tab = result[0];
callback({
url: tab.url,
title: tab.title
//favIconUrl: tab.favIconUrl
});
});
};
}]);
//define directives
angular.module('MyModule').directive('myAutoFocus', ['$document', function ($document) {
return {
link: function (scope, element, attributes, controller) {
angular.element($document).ready(function () {
element[0].focus();
});
}
};
}]);