AngularJS - Access isolate scope when using "controller as" syntax in directive

Question

I was reading a very interesting resource and I stumbled across this piece of code:

angular
    .module('app')
    .directive('myExample', myExample);

function myExample() {
    var directive = {
        restrict: 'EA',
        templateUrl: 'app/feature/example.directive.html',
        scope: {
            max: '='
        },
        link: linkFunc,
        controller: ExampleController,
        controllerAs: 'vm',
        bindToController: true // because the scope is isolated
    };
    return directive;

    function linkFunc(scope, el, attr, ctrl) {
        console.log('LINK: scope.min = %s *** should be undefined', scope.min);
        console.log('LINK: scope.max = %s *** should be undefined', scope.max);
        console.log('LINK: scope.vm.min = %s', scope.vm.min);
        console.log('LINK: scope.vm.max = %s', scope.vm.max);
    }
}

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

function ExampleController($scope) {
    // Injecting $scope just for comparison
    var vm = this;
    vm.min = 3;
    console.log('CTRL: $scope.vm.min = %s', $scope.vm.min);
    console.log('CTRL: $scope.vm.max = %s', $scope.vm.max);
    console.log('CTRL: vm.min = %s', vm.min);
    console.log('CTRL: vm.max = %s', vm.max);
}

What got most of my curiosity was the

console.log('LINK: scope.max = %s *** should be undefined', scope.max);

in the directive's link function. I don't understand why scope.max should be undefined. vm is defined in the controller, so why does the max attribute – which is directly defined in the directive's isolate scope – must be accessed through it on the link function? Is it related to using the controller as syntax on the directive?

Matt Herbstritt · Accepted Answer · 2015-08-03 23:39:41Z

3

I think it's the bindToController option that is the important bit here. It binds the isolate scope variables to the controller rather than the scope. Thus, there is no max property on the scope, just on the controller instance. This controller instance is then assigned to a property on the $scope when you use controllerAs so, in your example, you would see vm as a property on your $scope object if you were to log it in the console for example.

You can read more about bindToController in the $compile section in the docs: https://docs.angularjs.org/api/ng/service/$compile

edited Aug 3, 2015 at 23:39

answered Aug 3, 2015 at 23:32

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Access isolate scope when using "controller as" syntax in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related