angularjs bindToController value is undefined in controller

Question

I am using controllerAs on my directive and used bindToController. But bindToController parameter is undefined on controller. DEMO

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

myApp.controller('MyController', function($scope){

    $scope.change = function(){
        $scope.fullname = 'Brian Kim';
    }
});

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    scope: {
      name: '='
    },     
    controller: function () {
        console.log(this.name); // undefined
    },
    controllerAs: 'ctrl',
    bindToController: true,
    template: '{{ctrl.name}}',
  };
});

Slava.K · Accepted Answer · 2017-02-16 12:29:48Z

1

Your demo works as expected. Parent controller $scope.fullname is undefined during initialization. It receives value only after change button is hit. See updated demo: http://jsfiddle.net/10fmrb8n/

answered Feb 16, 2017 at 12:29

Slava.K

3,0803 gold badges19 silver badges28 bronze badges

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

Comments

federico scamuzzi · Accepted Answer · 2017-02-16 12:30:08Z

0

Hi the problem is that you do a console.log(this.name) on the init of the directive controller .. but $scope.fullname is filled with value only when you click the button and call the $scope.change function .. if you want it is not undefined you've to do something like:

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

myApp.controller('MyController', function($scope){
    $scope.fullname = 'Brian Kim'; //<-- HERE YOU INITIALIZE IT

    $scope.change = function(){
        $scope.fullname = 'Brian Kim';
    }
});

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    scope: {
      name: '='
    },     
    controller: function () {
        console.log(this.name);
    },
    controllerAs: 'ctrl',
    bindToController: true,
    template: '{{ctrl.name}}',
  };
});

So initialize it

answered Feb 16, 2017 at 12:30

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

1 Comment

barteloma Over a year ago

how can access a parameter at initialization time? I need it

Collectives™ on Stack Overflow

angularjs bindToController value is undefined in controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related