javascript - Angular JS 因 Controller 名称错误而导致的评估差异

标签 javascript angularjs

我是 Angular JS 的新手,正在通过教程学习,然后发现了一些奇怪的东西。

让我们假设在 JS 文件中我已将 Controller 定义为

   //Create the module
      var myApp = angular.module("myModule", []);

    // Creating the controller and registering with the module all done in one line.
      myApp.controller("myController", function ($scope) {
      $scope.message = "AngularJS Tutorial";
      });

现在我已经创建了一个 html 页面,我在其中使用这个 Controller

<!doctype html>
<html ng-app="myModule">
<head>
   <script src="Scripts/angular.min.js"></script>
   <script src="Scripts/Script.js"></script>
</head>
<body>
   <div ng-controller="myController">
      {{ message }}
   </div>
   <div>
      {{ message }}
   </div>
</body>
</html>

这会将我的输出返回为

 AngularJS Tutorial

现在当我错误地输入 Controller 名称时

<!doctype html>
<html ng-app="myModule">
<head>
   <script src="Scripts/angular.min.js"></script>
   <script src="Scripts/Script.js"></script>
</head>
<body>
   <div ng-controller="myController">
      {{ message }}
   </div>
   <div ng-controller="myController1">
      {{ message }}
   </div>
</body>
</html>

在这种情况下它给出

 AngularJS Tutorial
{{ message }}

现在虽然 myContoller1 不存在并且我也收到错误但仍然 {{message}} 在第一次尝试中不存在(第一种方法,在 div 中没有定义 Controller ),并且应该按原样打印。

谁能给我解释一下这种行为吗?

最佳答案

Controller 的范围仅适用于它所应用的 DOM 内。

在第一种情况下,您在第二个 div 中没有看到 {{message}} 值,因为您在 myController div 外部有该绑定(bind)。如果您将绑定(bind)包装在 myController div 中,它就会起作用。

<div ng-controller="myController">
   <div>
      {{ message }}
   </div>
   <div ng-controller="myController1">
      {{ message }}
   </div>
</div>

在第二种情况下,您没有 myController1,因此在创建 myController1 Controller 实例时 Angular 失败(提示:如果出现错误,请检查控制台是否有错误)不能在 JS 中工作)。

关于javascript - Angular JS 因 Controller 名称错误而导致的评估差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46029846/

相关文章:

javascript - 尝试在具有拼接功能的项目之间放置空格,但重新加载页面时崩溃(javascript)

javascript - 我如何编辑 Gruntfile.js 以包含构建 :js requests from a view?

javascript - '!!user' 有什么用?这一行的结果是什么?

javascript - 在 Angular js 中优化文本搜索

javascript - Angular Directive(指令)监视变量未触发

javascript - 如何正确使用 ng-cloak 指令?

javascript - 部署后套接字io不工作

Javascript 算法错误

javascript - 如何将 Javascript 时间戳转换为 UTC 格式?

AngularJS:从 compile() 和 link() 重构辅助函数