Pum*_*mba 93 javascript angularjs
我注意到在这里问过几次相同的问题,我试过这样解决但没有任何帮助.
我正在使用egghead视频关注本教程.
但是,当我进入控制器和控制器之间共享数据的部分时,我无法让它工作.
当我使用Chrome运行它时,我在控制台中收到此错误:
'参数'FirstCtrl'不是函数,未定义'.
我真的不知道出了什么问题.代码与教程中的代码相同.
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Tutorials: Controllers</title>
<link rel="stylesheet" href="mystyle.css">
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1> {{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me in a foundation component
</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope){
$scope.data = { message: "Hello" };
}
gio*_*_13 108
你ng-app的html中有2个未命名的指令.
在你的div中失去一个.
更新
让我们尝试不同的方法.
在js文件中定义一个模块并为其分配ng-app指令.之后,将控制器定义为ng组件,而不是简单的功能:
<div ng-app="myAppName">
<!-- or what's the root node of your angular app -->
和js部分:
angular.module('myAppName', [])
.controller('FirstCtrl', function($scope) {
$scope.data = {message: 'Hello'};
});
这是一个正在做的在线演示:http://jsfiddle.net/FssbL/1/
我刚刚完成了这个教程,并关注了@ gion_13的答案.仍然没有奏效.通过使索引中的ng-app名称与我的js文件中的名称相同来解决它.完全相同,甚至是引号.所以:
<div ng-app="myapp">
<div ng-controller="FirstCtrl">
和js:
angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
$scope.data= {message:"hello"};
});
奇怪的是,ng-app必须是相同的,但ng-controller却没有.
您必须ng-app为您的应用命名,为您的应用提供命名空间 单纯使用ng-app 是不够的.
代替:
<html ng-app>
...
你需要这样的东西:
<html ng-app="app">
...
然后,像这样:
var app = angular.module("app", []).controller("ActionsController", function($scope){});
另一个不错的选择:意外重新定义模块.我今天早些时候急切地复制/粘贴了一些东西,结果在某个地方有一个模块定义,我用我的控制器定义覆盖:
// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);
然后在我的定义中,我应该像这样引用它:
// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
.controller('SomeCtrl', function() { /* ... */ });
我做了什么,是:
// Do not try this at home!
// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
.controller('SomeCtrl', function() { /* ... */ });
// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
.controller('SomeOtherCtrl', function() { /* ... */ });
请注意调用中的额外括号angular.module.