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

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

javascript angularjs

Javascript AngularJS控制器变量的范围取决于它是否'；s附加到范围或此,javascript,angularjs,Javascript,Angularjs,我有以下控制器定义： var app = angular.module("myapp"); app.controller("ViewCtrl", function($scope) { this.panelVisible = true; this.panelShowHide = function() { this.panelVisible = !this.panelVisible; } }); 以下是我的观点： <body ng-controll

我有以下控制器定义：

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>


{{view.panelVisible}

在我看来，我正在调用panelShowHide函数，这与我的预期相反

this.panelVisible=！此.panelVisible

行以某种方式更新控制器变量（在

this.panelVisible=true；

行中定义）

这怎么可能？如果我在panelShowHide函数中执行了

$scope.panelVisible

，我可以理解，但是既然我在panelShowHide函数中执行了

这个.panelVisible

，那么该行不应该创建并更新函数范围内定义的新变量吗

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

当您输入新函数时，您必须始终怀疑

此

的值。试试这个：

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

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

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

当您输入新函数时，必须始终怀疑

this

的值。试试这个：

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

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

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

ng controller=“ViewCtrl as view”

功能的作用是在名为

view

的属性下的

$scope

上发布控制器的实例，例如：

由于

$scope.view

是控制器的实例，而

panelShowHide（）

是控制器对象上的函数，因此

panelShowHide（）

函数的“所有者”是控制器实例，因此

此指向它。
ng controller=“ViewCtrl as view”是什么意思
功能是在名为视图
的属性下的$scope
上发布控制器的实例，例如：

由于$scope.view
是控制器的一个实例，而panelShowHide（）
是控制器对象上的一个函数，因此panelShowHide（）
函数的“所有者”就是控制器实例，因此这个指向它。
是的-这正是让我困惑的地方。。。在AngularJS中，我不需要执行self.panelVisible=！self.panelVisible-由于某种原因，在某些情况下，它代替self将完全正常工作。这是一个JavaScript问题，与Angular无关<代码>此
是调用函数的对象。读一读：是的，这正是让我困惑的。。。在AngularJS中，我不需要执行self.panelVisible=！self.panelVisible-由于某种原因，在某些情况下，它代替self将完全正常工作。这是一个JavaScript问题，与Angular无关<代码>此
是调用函数的对象。读一读：我可能错了；但是panelShowHide（）函数已经存在于函数中；所以“this”指的是最上面的函数。您可以删除“this”以创建函数局部变量。如果你想访问锚；我不确定最好的方法。@Reboog711是的-在查看了链接后，我想我已经清除了它-首先，这将变量附加到函数（$scope）中，并且内联函数中的this.panelVisible引用父函数（即函数（$scope）函数）。如果第一次这样做（连接到self，而不是自然父级-即窗口），我不是100%，因为某些角度的行为，或者这是像这样定义的函数的正常JS行为；但是panelShowHide（）函数已经存在于函数中；所以“this”指的是最上面的函数。您可以删除“this”以创建函数局部变量。如果你想访问锚；我不确定最好的方法。@Reboog711是的-在查看了链接后，我想我已经清除了它-首先，这将变量附加到函数（$scope）中，并且内联函数中的this.panelVisible引用父函数（即函数（$scope）函数）。如果第一次这样做（连接到self，而不是自然父级，例如window），我就不是100%，因为某些角度的行为，或者这是像这样定义的函数的正常JS行为。