AngularJS controller as and this instead of $scope calling $apply in directive

Question

I've been using the controller as syntax and this instead of $scope in my Angular project and ran across an issue using a directive. I'm trying to call a function in my controller using scope.$apply() in the directive. But since I'm not using scope in the controller, I'm getting this error: Uncaught TypeError: undefined is not a function.

I understand why because of the scope issue, but my question is what's the correct way to use $apply in my directive using controller as and this instead of $scope?

JSFiddle Example: http://jsfiddle.net/z6476omb/

angular
    .module('testApp',[])
    .controller('TestCtrl',TestCtrl)
    .directive('updateDirective',updateDirective)


function TestCtrl() {
    var vm = this;
    vm.name = 'Rob'
    vm.updateName = updateName;

    function updateName(new_name) {
        vm.name = 'Robert';
    }
}

function updateDirective() {
    var directive = {
        link: link,
        restrict:'A'
    }

    return directive;

    function link(scope,element,attr) {
        element.on('click',function() {
            console.log('trying to change...');
            scope.$apply(scope.updateName());
        });
    }
}

sma · Accepted Answer · 2014-10-07 14:25:35Z

1

One way to do it is to refer to the controller scope using the alias you used: ctrl.

So in your directive, you can do refer to it as: scope.ctrl.updateName()

See fiddle here:

http://jsfiddle.net/z6476omb/1/

answered Oct 7, 2014 at 14:25

sma

9,5978 gold badges53 silver badges83 bronze badges

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

1 Comment

Rob Over a year ago

It worked! It would have taken a while to figure that out. I appreciate your help.

Collectives™ on Stack Overflow

AngularJS controller as and this instead of $scope calling $apply in directive

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related