5

我正在尝试遵循 Angular 的样式指南，并写道我们应该使用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;
}

任何人都可以帮助我理解这一点吗？

4

2 回答 2

5

当您this在控制器中使用 (context) 而不是 时$scope，您必须使用controllerAswhile 在页面上定义 html 来访问控制器变量。每当您想使用有界到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>
于 2015-09-27T12:37:30.817 回答
1

假设您的控制器名为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为viewmodel，因为控制器控制视图。

于 2015-09-27T12:41:17.090 回答