0

我正在关注 Angular JS 的视频教程视频，并开始了使用控制器作为语法的主题。然而，我正在处理的示例与教程中的示例产生了不同的结果。我的代码（如下）输出以下错误：

angular.js:13550 Error: [ng:areq] Argument 'ParentController' is not a function, got undefined

我很困惑为什么会发生这种情况，因为我从教程中逐字复制了代码，并且在教程的代码输出看起来不错时仍然出现错误。

HTML

<body>
    <div ng-controller="ParentController">
        <p>This is the parent: {{ parentMessage }}</p>
        <div ng-controller="FirstChild">
            <p>My parent is: {{ parentMessage }}</p>
            <p>The first child is: {{ firstMessage }}</p>
        </div>
        <div ng-controller="SecondChild">
            <p>My parent is: {{ parentMessage }}</p>
            <p>The second child is: {{ secondMessage }}</p>
        </div>
    </div>
</body>

JS

angular.model('myApp').controller('ParentController', ['$scope', function($scope) {
$scope.parentMessage = 'What she said.';}]);

angular.model('myApp').controller('FirstChild', ['$scope', function($scope) {
$scope.firstMessage = 'I want my mother.';}]);

angular.model('myApp').controller('SecondChild', ['$scope', function($scope) {
$scope.secondMessage = 'I want my father.';}]);

出现错误的原因是 HTML 代码无法在 JS 代码中找到 ParentController、FirstChild 和 SecondChild 函数作为函数。这让我感到困扰的原因是，当我尝试类似的父/子 JS/HTML 代码对时，错误不会出现。

HTML

<body>
    <div ng-controller="First">
        <input type="text" ng-model="model.name">
        <p>This is the first controller: {{model.name}}</p>
    </div>
    <div ng-controller="Second">
        <input type="text" ng-model="model.name">
        <p>This is the second controller: {{model.name}}</p>
    </div>  
</body>

JS

angular.module('myApp').service('SharedService',function(){
    return {name: 'Uncle Alvin'};});

angular.module('myApp').controller('First',['$scope', 'SharedService', function($scope, SharedService){
        $scope.model = SharedService;}]);

angular.module('myApp').controller('Second',['$scope', 'SharedService', function($scope, SharedService){
        $scope.model = SharedService;}]);

我不相信使用共享服务是后一对代码有效而前者无效的原因。我想知道是什么导致 HTML 在第一个实例中无法识别 ng-controllers，以及我应该如何修改这对以使它们可识别。

如果这篇文章对于我自己找不到的另一个主题来说是多余的，我深表歉意。如果是，请随时链接此问题的最原始/最有用的帖子。

4

2 回答 2

0

控制器在第一个模块中不起作用的原因是，

(i)model不是module

angular.module('myApp')

如果你不声明三次，声明一次并添加控制器，这很容易。

var myApp= angular.module('myApp', []);

myApp.controller('ParentController', ['$scope', function($scope) {
$scope.parentMessage = 'What she said.';}]);

myApp.controller('FirstChild', ['$scope', function($scope) {
$scope.firstMessage = 'I want my mother.';}]);

myApp.controller('SecondChild', ['$scope', function($scope) {
$scope.secondMessage = 'I want my father.';}]);
于 2016-05-09T18:40:23.810 回答
-1

这是一个关于如何做到这一点的简单示例。

以 w3schools 为例

名：
姓：

全名：{{firstName + " " + lastName}} 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

于 2016-05-09T18:45:04.193 回答