Question

我正在尝试按照角度的样式指南而写，我们应该使用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模板

然后根据您提供的别名（表单）调整您的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 ，作为控制器控制视图。

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

2 个答案:

第一步

HTML模板

控制器声明