我是 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/