Question

所以我对AngularJS来说是全新的，并且按照了一门课程开始了＃34;学习＆＃34;这个框架。我在本页面顶部观看了2个截屏视频：

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

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

的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绑定到控制器A中的范围后，我发现它没有工作，我在互联网上寻找解决方案。我找到了一些应该（可以？）工作的不同方式（B＆amp; C）。只有选项C工作，并在运行html时显示C. A＆amp; A B没什么。

为什么选项A和B在此示例中不起作用？

Answer 1

因为您使用的是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/

Answer 2

这是完全相同的事情：

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

如果使用缩小，则此语法将起作用，前一个不是。

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

在视图中使用此语法：

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

Answer 3

因为您使用的是controller as别名，所以选项A＆amp; B放置在作为$scope的childScopes的控制器范围内。

如果您console.log $scope，您会看到选项A＆amp; B在控制器范围内创建，而不是$scope，这是那些控制器的父范围。

在控制器

3 个答案: