Javascript 从命名/未命名控制器引用角度控制器成员

我决定提出这个问题，因为我对JavaScript的角度和更微妙的部分的工作方式感到非常困惑。我试着把我的问题表述清楚，这样就可以把它分解了

从控制器公开变量的标准方法是在

$scope

上声明它们

.controller('MyCtrl', function($scope) {
  $scope.value = 5; 
});

然后从模板引用中，假设

MyCtrl

是控制器，如下所示：

{{value}}

当我使用controllerAs语法时，例如使用

ui路由器时，如下所示：

state('mystate', {
  templateUrl: 'partials/some.html',
  controller:  'MyCtrl as ctrl' }

.controller('MyCtrl', function($scope) {
  $scope.value = 5;
  this.otherValue = 10;
});

{{value}} {{ctrl.otherValue}}

我仍然可以使用
{{value}}
获得
值
，这样就可以了。但是，如果我声明另一个值，如下所示：

state('mystate', {
  templateUrl: 'partials/some.html',
  controller:  'MyCtrl as ctrl' }

.controller('MyCtrl', function($scope) {
  $scope.value = 5;
  this.otherValue = 10;
});

{{value}} {{ctrl.otherValue}}

然后使用
controller:'MyCtrl'
语法，我可以不引用
{{otherValue}
。
但是，使用
控制器：“MyCtrl as ctrl”
语法，我可以这样引用它们：

state('mystate', {
  templateUrl: 'partials/some.html',
  controller:  'MyCtrl as ctrl' }

.controller('MyCtrl', function($scope) {
  $scope.value = 5;
  this.otherValue = 10;
});

{{value}} {{ctrl.otherValue}}

第1点的总结：我总是可以像
{{value}}
一样引用
值
，但是如果控制器被命名，我只能引用
其他值
，所以
{ctrl.otherValue}}

我的第二点是关于函数的，主题与第1点类似。假设我定义了两个函数：

.controller('MyCtrl', function($scope) {
  $scope.myFunc = function() {};
  this.otherFunc = function () {};
});

现在，如果我再次像上面一样使用

控制器：“MyCtrl”

语法，我可以从模板调用

myFunc

：

<button ng-click="myFunc()">

但是我可以通过引用名为的控制器来调用

otherFunc

：

<button ng-click="ctrl.otherFunc()">

第2点总结：我只能调用

$scope.

函数，就像我不使用controllerAs语法时习惯的那样，并且只能在引用命名控制器时调用

此。

函数。 这与第1点不同，在第1点中，我可以从命名或未命名的控制器定义中引用

$scope.

变量

我知道控制器构造函数用于设置

$scope

，模板应该使用

$scope

，但是命名控制器有什么不同呢？ 我猜controllerAs语法导致自定义名称指向的不是作用域，而是控制器函数本身，但如果有人能帮我澄清一下，我将不胜感激

我还认为，这些行为不仅与ui路由器有关，还与它的工作原理有关，因此我也想知道：

• 应该在

  $scope

  上设置什么，不应该设置什么
• 函数本身（？）应该设置什么，不应该设置什么
• 使用命名控制器时，是否有方法访问

  $scope.

  函数
• 有什么建议或者我遗漏的一些明显的要点吗

---

提前感谢您的时间。

$scope

和控制器是两个不同的对象。（Angular中的控制器函数实际上是一个对象的Javascript构造函数，可以使用

this

正常访问该对象），因此将某个对象放入

$scope

-

$scope.value=“xxx”

-与将某个对象放入

this

-

this.otherValue=“yyy”

完全不同。Angular中的规则是，

$scope

是可以从视图模板（即HTML）中访问的，因此，

$scope

下的任何内容都可以通过

{{value}}

符号和模板表达式直接访问

总而言之：您不能从模板访问控制器的成员，就像您不能访问窗口对象（或

$http

服务，或

$q

，…，等等）的成员一样，因为这些对象与

$scope

完全不同。从视图中只能访问

$scope

的成员

命名控制器做了一件简单的事情：控制器被放置在给定名称下的

$scope

中。因此，控制器可以访问，例如作为

{{ctrl}

，其成员可以作为

{{ctrl.otherValue}

访问。（为了明确某些事情：在控制器中执行

this.otherValue=“yyy”

将使

otherValue

成为控制器的成员。）

我希望这能回答问题（1）和（2）。其余的：

应该在

$scope

上设置什么，不应该设置什么

将需要从视图访问的内容放入

$scope

中

函数本身（？）应该设置什么，不应该设置什么

我不知道你说的是什么意思。如果您是指控制器中的

this.xxx=“yyy”

，则这不会将

xxx

放在函数中，而是放在函数构造的对象中（

this

）

使用命名控制器时，是否有方法访问

$scope.

函数

您始终可以访问

$scope

成员（函数或非函数）。不要混淆：在上面的示例中，即

$scope.myFunc=function（）{}；this.otherFunc=函数（）{}

，

myFunc

是

$scope

对象的成员，而不是控制器，因此无法通过

ctrl.myFunc（）

访问它

有什么建议或者我遗漏的一些明显的要点吗

---

在简单的情况下，不清楚控制器实际上是一个用

new

调用并创建新对象的构造函数。这在协作指令中非常有用，其中一个指令可以

要求它与之协作的另一个指令的控制器，并调用控制器成员函数。
除此之外，我的经验法则是将数据放在
$scope
上，并在控制器上显示行为。感谢@Nikos，我可能已经意识到了一半，只是因为我不确定而感到困惑。你的回答使我顿悟。我也发现了@杰夫：这正是我想出来的，只是感觉好一些。根据链接的答案，只需小心不要将
此
放入
$scope上定义的函数中