Question

我正在关注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，以及我应该如何修改该对以使它们可识别。

如果这篇帖子对我自己找不到的另一个话题多余，我道歉。如果是，请随时链接此问题的最原始/有用的帖子。

Answer 1

控制器无法在第一个模块中工作的原因是，

（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.';}]);

Answer 2

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

从w3schools拿到这个例子

名字：
姓氏：

全名：{{firstName +＆＃34; ＆＃34; + lastName}}

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

＆＃13;

<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>

＆＃13;

HTML无法识别角度控制器

2 个答案: