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).

Bas Slagter · Accepted Answer · 2015-12-18 14:59:05Z

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>

edited Dec 18, 2015 at 14:59

answered Dec 18, 2015 at 14:52

Bas Slagter

9,9419 gold badges51 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

messerbill Over a year ago

plz also post a solution - otherwise this is not a correct answer

Danny Over a year ago

@Bas thanks for your comment, I placed the 'test' variable outside the function but it does not return the correct results, please take a look at my edit

Bas Slagter Over a year ago

@Dan no, that would make no difference. See my editted answer to see a possible solution.

Bas Slagter Over a year ago

@messerbill there was nothing wrong with that answer since the current solution is just not right in it's setup. Hard to post a solution that way. Tried anyways.

Danny Over a year ago

@Bas 'test' is hard coded in this example but it should be dynamic. Is there a way to do this if it was dynamic?

|

Collectives™ on Stack Overflow

Angular directive no data in link function's $scope

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related