所以我对 AngularJS 完全陌生,并按照类(class)开始“学习”这个框架。我观看了本页顶部的 2 个截屏视频:
https://github.com/curran/screencasts/tree/gh-pages/introToAngular
在观看了两个截屏视频并研究了一些示例之后,我尝试创建自己的简单 Angular 应用程序,并尝试在其中使用一些 Controller 。现在我有以下代码:
Index.html
<html ng-app="WIMT">
<head>
<title>trying out angularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="../JS/app.js"></script>
</head>
<body>
<div ng-controller="controllerA as a">
{{a.varA}}
</div>
<div ng-controller="controllerB as b">
{{b.varB}}
</div>
<div ng-controller="controllerC as c">
{{c.varC}}
</div>
</body>
</html>
JS
(function() {
var app = angular.module('WIMT',[]);
app.controller('controllerA',function($scope,$http){
$scope.varA = "A";
});
app.controller('controllerB',['$scope',function($scope) {
$scope.varB = "B";
}
]);
app.controller('controllerC',function($scope, $http) {
var reg = this;
reg.varC = "C";
});
})();
当我尝试将 varA 绑定(bind)到 Controller A 中的范围后,我发现它不起作用,我在互联网上寻找解决方案。我发现了一些应该(可以?)工作的不同方法(B&C)。当我运行 html 时,只有选项 C 有效并显示 C。 A 和 B 都没有显示任何内容。
为什么选项 A 和 B 在此示例中不起作用?
最佳答案
因为您使用的是 controllerAs
语法,这就是为什么第三个有效而前两个无效。
<div ng-controller="controllerA as a">
{{a.varA}}
</div>
<div ng-controller="controllerB as b">
{{b.varB}}
</div>
<div ng-controller="controllerC as c">
{{c.varC}}
</div>
如果您想要打印a.varA
和b.varB
,则必须更改为以下内容:
<div ng-app="app">
<div ng-controller="controllerA as a">
{{varA}}
</div>
<div ng-controller="controllerB as b">
{{varB}}
</div>
<div ng-controller="controllerC as c">
{{c.varC}}
</div>
</div>
关于javascript - 初始化 Controller 中的范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37568914/