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上发布控制器实例，例如：

enter image description here

由于$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 个答案: