Question

考虑一下：

<!doctype html>
<html ng-app="some">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="helloCtrl as hello">
      <label>Name:</label>
      <h1>Hello {{hello.yourName}}!</h1>
    </div>
  </body>
  <script>
    angular.module("some", []).controller("helloCtrl", function($scope){
        $scope.yourName = 'Alice'
    })

</script>
</html>

如果我将$scope.yourName = 'Alice'更改为this.yourName = 'Alice'，则可行。为什么不呢？
同样，如果我保留$scope.yourName = 'Alice'并仍然使用作为控制器语法，则它不起作用。

我在问，因为我在内部读到AngularJS将this设置为$scope的地方。

Answer 1

首先，一个可选的练习，以便在引擎盖下偷看＆＃34;。如果您正在使用Chrome，请安装Batarang，检查您的控制器div并查看$scope标签。如果您未使用controllerAs，则会看到所有控制器属性，但如果您不是，则您只会看到一个名称与您的属性相对应的属性控制器别名。然后，所有属性都将在树中低于此值。

使用Angular很容易忘记的事情是控制器只是JS对象，在页面加载时由Angular实例化。在第一个示例中，当您的控制器被实例化时，它将yourName属性添加到传递给构造函数的$scope对象。要获取此属性的值，请使用$scope.yourName - 尽管在您的手柄中，Angular会为您添加$scope.前缀。

我在某处读到AngularJS内部设置为$ scope

这是误解的地方。在第二个示例中，yourName是控制器的属性，不是属性$scope。这就是controllerAs的来源 - 没有魔法，只是一点点语法糖。这里，当控制器被实例化并且其属性设置为this时，Angular在$scope上创建一个属性，其名称对应于controllerAs和控制器对象的值。因此，此属性的值为$scope.hello.yourName - 因此在您的把手中写下hello.yourName。

来源：

Angular Controller Documentation - 很多显而易见的＆＃34;怎么＆＃34;，但有一点（相当干燥！）有关如何在下面工作的信息

The Angular Style Guide on Controllers - Angular开发人员IMO必读。解释了很多＆＃34;为什么＆＃34;简明扼要，以及＆＃34;如何＆＃34;。

Answer 2

实际上，$scope与范围有关，所以如果你的控制器中有这样的东西：

$scope.Alice = "Alice";

你在HTML中使用它：

{{ Alice }}

但是如果你使用this，它就不再与范围挂钩而且你的控制器已经

this.Alice

然后你把它写成{{ controllerAlias.Alice }}告诉Angular它是控制器的一部分，而不是范围。（即只有Alice不再工作了。）

关于问题的第二部分，您可以使用hello.Alice而不使用别名：

$scope.hello = this;

使用controller as时隐式完成此操作（在旧版Angular中没有这样做）。

为什么我们不能使用＆＃34;控制器作为＆＃34; AngularJS中的语法替换＆＃34;这个＆＃34;与范围？

2 个答案: