应用程序工作，但其中的第一个控制器出现故障

Application works but the first controller inside it fails

本文关键字：控制器 第一个 故障 工作 应用程序      更新时间：2023-09-26

我正在应用程序中设置一个控制器（大致遵循指南）。第一个div的行为与预期的一样——第一个显示文本，另一个为空。然而，ContraAss控制器似乎没有被渲染，只显示｛｛info｝｝。我错过了什么愚蠢的东西？（注意。我相信这是基本的，但考虑到缺乏经验和对智能感知表现不佳的普遍愤怒，我不知道如何进行。）

XML

<body>
  <div ng-app="ApplicationHolder">
    <div>Uno: "{{holderUno}}"</div>
    <div>Duo: "{{holderDuo}}"</div>
    <div ng-controller="ContraAss">{{info}}</div>
  </div>
</body>

JS-

var application = angular.module("ApplicationHolder", []);
application.run(function ($rootScope) {
  $rootScope.holderUno = "Blipp";
});
application.controller("ContrAss", function($scope) {
  $scope.info = "This is an info carrier";
});

输出

Uno:"Blipp"
二人组："
｛｛info｝｝

起初，我认为我可能以错误的方式发送范围，但后来我意识到它会被呈现为一个空字符串，类似于HolderDuo。所以现在，我倾向于怀疑控制器根本没有被识别为控制器。

我该如何处理？

HTML和JS中的控制器名称不匹配（拼写错误）。

HTML正在寻找一个名为ContraAss的控制器，但在您的JavaScript中，您已将其定义为ContrAss。Ergo，不存在控制器，它会向您的控制台抛出一个错误（当您不了解JavaScript在做什么时，这是一个很好的第一检查位置）。

将控制器定义更改为：

myApp.controller("ContraAss", function($scope) {
  $scope.info = "This is an info carrier";
});

根据@Starscream1984在ContraAss到ContrAss的评论中建议更新控制器名称（并将应用程序名称更改为myApp）：

HTML:

<body>
  <div ng-app="myApp">
    <div>Uno: "{{holderUno}}"</div>
    <div>Duo: "{{holderDuo}}"</div>
    <div ng-controller="ContrAss">{{info}}</div>
  </div>
</body>

JS:

var myApp = angular.module("myApp", []);
myApp.run(function ($rootScope) {
  $rootScope.holderUno = "Blipp";
});
myApp.controller("ContrAss", function($scope) {
  $scope.info = "This is an info carrier";
});

JSfiddle：http://jsfiddle.net/ghorg12110/HB7LU/19922/

相关文章：