从指令更改控制器$ scope

Question

I have a controller:

function myController($scope) {
    $scope.clicked = false;
}

and a directive:

function myDirective() {
    return {
        restrict: 'E',

        link: function(scope, elem, attrs) {

            elem.bind('click', function() {
                // need to update controller $scope.clicked value
            });
        },

        template: '<div>click me</div>'; 
        replace: true;
    }
}

and I´m using it like this:

<div ng-controller="myController">
    <my-directive></my-directive>
</div>

How can I change the controller value of $scope.clicked ? thanks!

Answer 1

As you don't use isolated scope in your directive, you can use scope.$parent.clicked to access the parent scope property.

link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                scope.$parent.clicked = ...
            });
        },

Answer 2

I would not recommend using scope.$parent to update or access the parent scope values, you can two way bind the controller variable that needs to be updated into your directive, so your directive becomes:

function myDirective() {
    return {
        restrict: 'E',
        scope: {
         clicked: '='
        },
        link: function(scope, elem, attrs) {

            elem.bind('click', function() {
                // need to update controller $scope.clicked value
                $scope.clicked = !$scope.clicked;
            });
        },

        template: '<div>click me</div>'; 
        replace: true;
    }
}

now pass this clicked from parent:

<div ng-controller="myController as parentVm">
    <my-directive clicked="parentVm.clicked"></my-directive>
</div>

function myController() {
    var parentVm = this;
    parentVm.clicked = false;
}

I would recommend reading up on using controllerAs syntax for your controller as that would really solidify the concept of using two way binding here.

Answer 3

I like to use $scope.$emit for such purposes. It allows to send data from directive to the controller. You should create custom listener in your controller:

$scope.$on('cliked-from-directive', function(event, data){
        console.log(data)
})

As you can see, now you have full access to your controller scope and you can do whatever you want. And in your directive just to use scope.$emit link: function(scope, elem, attrs) {

        elem.bind('click', function() {
          scope.$emit('cliked-from-directive', {a:10}) 
        });

Here I've created jsfiddle for you