初始化控制器中的范围变量

所以我对AngularJS完全陌生，并参加了一门课程并开始"学习"这个框架。我观看了本页顶部的 2 个截屏视频：

https://github.com/curran/screencasts/tree/gh-pages/introToAngular

在观看了两个截屏视频并查看了一些示例后，我尝试创建自己的简单 Angular 应用程序，在其中尝试使用一些控制器。现在我有以下代码：

索引.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 绑定到控制器 A 中的范围后，我发现它不起作用，我在互联网上寻找解决方案。我找到了几种不同的方法（B&C）应该（可以？）工作。只有选项 C 有效并在我运行 html 时显示 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>

http://jsfiddle.net/t0hhp5wz/

这是一回事：

app.controller('controllerA',function($scope,$http){
    $scope.varA = "A";
});

如果您使用缩小，则此语法将起作用，而以前的语法则不然。

app.controller('controllerB',['$scope',function($scope) {
    $scope.varB = "B";
}
]);

在视图中使用以下语法：

 <div ng-controller="controllerA">
  {{varA}}
</div>

因为您使用的是controller as别名，因此选项 A 和 B 被放置在控制器作用域内，这些作用域是 $scope 的子作用域。

如果console.log $scope，您将看到在控制器作用域内创建的选项 A 和 B，而不是在$scope这些控制器的父作用域中创建的选项 A&B。

相关内容

最新更新

热门标签：