Using this instead of $scope inside controller

Question

I am trying to follow style guide for angular and there wrote we should use this insted scope...

Styleguide

Could someone explain me when I am able to use this?

Here is my try..... What I am doing wrong?

I am trying to toggle form.... here is my html code:

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

With classic $scope I would do like this inside my conroller :

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

But with this it should look something like this(but don't work):

var vm = this;
vm.formEdit = formEdit;

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

Anyone can help me to understand this?

Answer 1

When you are using this(context) in controller instead of $scope, you must use controllerAs while defining html on page to access controller variables. Whenever you wanted to use variable bounded to this on view you could use alias of your controller. Below you can see vm is alias of controller.

ng-controller="myController as vm"

Then while accessing controller method an variable inside ng-controller div you need to use alias of your controller like 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

Assuming your controller is named FormController.

First step

The first step is to declare the route (or the ng-controller value if you are not using a router) as such:

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

Due to the above configuration, angular will alias as form the instances of FormController.

HTML template

Then adapt your html template according to the alias you gave (form). I modified your html to keep only the essential part about the question. We are calling the functions form.reply and form.close.

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

Controller declaration

According to what we wrote above, our controller should look like that:

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

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

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

Notice the var vm = this; line? Theoretically we could get rid of this line, and store the functions reply and close in the this object. But depending of the context, this does not refer to the same object. In a callback function this would not refer to the controller but to the callback function. That's why we are caching the this that refers to the controller. We usually name this reference vm for viewmodel, as a controller controls a view.