在控制器内使用此代替$ scope

Question

我正在尝试按照角度的样式指南,写道我们应该使用thisinsted scope...

时尚指南

当我能够使用时,有人能解释我this吗？

这是我的尝试.....我做错了什么？

我正在尝试切换表格....这是我的HTML代码:

<a href="#" ng-click="formEdit(x)"  ng-if="!x.formEditShow">REPLY</a>
<a href="#" ng-click="formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>

使用经典$scope我会在我的控制器中这样做:

$scope.formEdit = function(data){
data.formEditShow = !data.formEditShow;
}      

但this它应该看起来像这样(但不起作用):

var vm = this;
vm.formEdit = formEdit;

function formEdit(data){
    data.formEditShow = !data.formEditShow;
}

有人可以帮我理解这个吗？

Answer 1

当你this在控制器中使用(context)而不是$scope,你必须controllerAs在页面上定义html时使用来访问控制器变量.每当你想this在视图中使用变量限制时,你可以使用alias你的控制器.下面你可以看到vm控制器的别名.

ng-controller="myController as vm"

然后在访问控制器方法时,ng-controllerdiv中的变量需要使用控制器的别名ng-click="vm.formEdit(x)"

HTML

<a href="#" ng-click="vm.formEdit(x)"  ng-if="!x.formEditShow">REPLY</a>
<a href="#" ng-click="vm.formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>