Angular directive no data in link function's $scope

Question

I have this directive which sets the test variable to abc in the init function of the controller. However in my link function the test variable is undefined.

angular.module('module')
       .directive('directive', myDirective);

function myDirective() {
  var directive = {
    link: link,
    bindToController: true,
    controllerAs: 'dt',
    controller: Controller,
    ...
  };

  return directive;

  function link(scope, element, attrs) {
    ...
    scope.dt.initialize = function() {
      initializeDirective(scope, element, attrs);
    }
  }

  function initializeDirective(scope, element, attrs) {
    // not able to get scope.dt.test, it's undefined
    console.log(scope.dt.test); // undefined
  }
}

function Controller() {
  var vm = this;
  vm.test = '123';
  vm.create = function(data, config) {
    vm.test = 'abc';
    vm.initialize();
  }
  ...
}

And in another JavaScript file code that creates the directive. It is calling the create function

// JavaScript in another file that inits the directive
var directive = vm.get(...);
vm.create(vm.data, config);

From my understanding, scope.dt should be automatically injected to the link function because of the controllerAs, which it is but scope.dt.test does not exist.

EDIT

I put the test variable outside the create function and set it to 123. The console.log now logs 123, which is not what I want (I want abc).

Answer 1

That is because your link function executes when the directive is compiled. If you call create after that you are to late and the variable 'test' is stil undefined at the moment of compilation.

What you probably want is specify the value as an attribute on your directive:

angular
    .module('module')
    .directive('directive', myDirective);

    function myDirective(){
        return {
            link: link,
            bindToController: true,
            controllerAs: 'dt',
            controller: controller,
            scope: {
               test: '@'
            }
        };

        function controller(){
            var vm = this;
            // at this point vm.test is set to the value specified.
        }

        function link(scope, elem, attrs){
            // U can use scope.dt.test, scope.test or attrs.test here
        }
    }

Use this directive as:

<my-directive test="{{someValue}}"></my-directive>