在控制器中使用它而不是 $scope

Question

我正在尝试遵循 angular 的风格指南，其中写道我们应该使用 this insted 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（上下文）而不是 $scope 时，您必须在页面上定义 html 时使用 controllerAs 来访问控制器变量。每当您想在视图中使用绑定到 this 的变量时，您可以使用控制器的 alias。下面你可以看到 vm 是控制器的别名。

ng-controller="myController as vm"

然后在访问控制器方法时 ng-controller div 中的变量，您需要使用控制器的别名，例如 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>

Answer 2

假设您的控制器名为 FormController.

第一步

第一步是声明路由（如果不使用路由器，则为 ng-controller 值）：

FormController as form // name it semantically instead of a generic name

由于上述配置，angular 将别名为 form FormController 的实例。

HTML 模板

然后根据您提供的别名 (form) 调整您的 html 模板。我修改了您的 html 以仅保留有关该问题的重要部分。我们正在调用函数 form.reply 和 form.close.

<a href="#" ng-click="form.reply()">REPLY</a>
<a href="#" ng-click="form.close()">CLOSE</a>

控制器声明

根据我们上面写的，我们的控制器应该是这样的：

myApp.controller('FormController', function () {
    var vm = this;

    vm.reply = function () {
        // ...
    }

    vm.close = function () {
        // ...
    }
}

注意到 var vm = this; 行了吗？理论上我们可以去掉这一行，将函数 reply 和 close 存储在 this 对象中。但是根据上下文，this 并不指代同一个对象。在回调函数中，this 不会引用控制器，而是引用回调函数。这就是我们缓存引用控制器的 this 的原因。我们通常将此引用命名为 vm for viewmodel，作为控制器 controls a view.

在控制器中使用它而不是 $scope

Using this instead of $scope inside controller

javascript

angularjs

angularjs-scope

angularjs-controller

angularjs-controlleras

第一步

HTML 模板

控制器声明