控制器变量的AngularJS范围取决于它是否附加到范围或此范围

Question

我有以下控制器定义：

var app = angular.module("myapp");

app.controller("ViewCtrl", function($scope) {
    this.panelVisible = true;

    this.panelShowHide = function() {
        this.panelVisible = !this.panelVisible;
    }
});

这是我的看法：

<body ng-controller="ViewCtrl as view">
    <a href="" ng-click="view.panelShowHide()">Button</a>
    {{view.panelVisible}}
</body>

从我的角度来看，我正在调用panelShowHide函数，与我的预期相反， this.panelVisible = !this.panelVisible行以某种方式更新了控制器变量（在this.panelVisible = true;行中定义）

那怎么可能？ 我知道我是否执行了$scope.panelVisible ，但是由于我正在panelShowHide函数中执行this.panelVisible ，因此该行是否不应该在函数范围内创建和更新定义的新变量？

我问这个问题是为了更好地理解AngularJS的范围，因为在一些更复杂的情况下（例如使用$ http.get），我的this.reference是“正确解析的”（局部变量），我希望能够引用控制器变量（封装逻辑）。

Answer 1

ng-controller="ViewCtrl as view"功能的作用是在$scope的名为view的属性下发布控制器的实例，例如：

在此处输入图片说明

由于$scope.view是你的控制器的一个实例panelShowHide()控制器对象的功能，的“所有者” panelShowHide()函数是控制器实例，因此this指向它。

Answer 2

输入新功能时，您必须始终对this的值感到怀疑。 尝试这个：

var app = angular.module("myapp");

app.controller("ViewCtrl", function($scope) {
    var self= this;
    self.panelVisible = true;

    self.panelShowHide = function() {
        self.panelVisible = !self.panelVisible;
    }
});

控制器变量的AngularJS范围取决于它是否附加到范围或此范围

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-02-26 23:18:23

解决方案2
2 2014-02-26 22:26:05

控制器变量的AngularJS范围取决于它是否附加到范围或此范围

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-02-26 23:18:23

解决方案2 2 2014-02-26 22:26:05

解决方案1
3 已采纳 2014-02-26 23:18:23

解决方案2
2 2014-02-26 22:26:05