Angular 'this' not working inside directive controller

Question

I have the following code. Why doesn't the vm.name work? Why is the this inside the controller not being detected? Haven't I defined a closed scope for the directive?

What am I doing wrong?

var mod = angular.module('myApp', []);

mod.directive('myObj', myObject);

function myObject(){
  return {
      restrict: 'E',
      templateUrl: 'my-obj.html',
      scope: {},
      controller: myController
  };

  function myController(){
    var vm = this;

    vm.name="vfdfbdn";
  }
}

Answer 1

To use this in controller inside directive you need to use controllerAs: 'ctrl' but then in template you will need to prefix all name with {{ctrl.name}} or you can use $scope like:

function myController($scope) {
    $scope.name="vfdfbdn";
}

Answer 2

function myObject(){
  return {
      restrict: 'E',
      template: '<div>{{c.name}}</div>',
      scope: {},
      controller: myController,
      controllerAs: 'c'
  };

  function myController(){
    var vm = this;

    vm.name="vfdfbdn";
  }
};

Please see this question to understand the things

Answer 3

Try this:

function myObject() {
    return {
        restrict: 'E',
        templateUrl: 'my-obj.html',
        scope: {},
        bindToController: true,
        controller: myController
    };
}


myController.$inject = ['$scope'];

function myController($scope){
  var vm = this;
  vm.name="vfdfbdn";}

Answer 4

You need to tell Angular how you are going to reference the this from the controller in the view.

function myObject(){
  return {
      restrict: 'E',
      templateUrl: 'my-obj.html',
      scope: {},
      controller: myController,
      controllerAs: 'ctrl'
  };
}

Now you can reference everything that you assigned to this, that you named vm in your controller with ctrl.

I used ctrl to show that there is no correlation between the name you use to refere to it in the view, setted with controllerAs and the name you give to this inside the controller function. It is a normal to reference different controllers with different controllerAs references so you can now which controller they refer to in the view.