coure2011
coure2011

Reputation: 42454

how to call parent method from directive?

I have directive like this

.directive('myModal', function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            myModalId: '@'
        },   
        template: '<div id="{{myModalId}}" class="modal">' +
            '<div ng-click="parentMethod()" class="modal-dialog">' +
                '...' +
            '</div>' +
        '</div>'
    }
});

js code

function ParentController($scope) {
    $scope.parentMethod = function() {
        alert('clicked');
    }
}

Upvotes: 1

Views: 70

Answers (2)

Vamsi
Vamsi

Reputation: 156

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <direct movied="movie" call-home="callFromDirect"></direct>
</div>

<script>
    var myApp = angular.module("myApp", []);

    myApp.controller("myCtrl", function($scope, $rootScope) {
        $scope.callFromDirect = function (param) {
            console.log('got call to direct ' + param);
        }
    });

    myApp.directive("direct", function () {
        return {
            restrict: 'E',
            scope: {
                callHome: '='
            },
            template: "<input type=\"button\" value=\"click\" ng-click=\"callHome('movie')\" />"
        }
    });
</script>

Upvotes: 1

dfsq
dfsq

Reputation: 193261

There are several ways you can achieve this. I would do it using attribute binding which allows you to execute an expression in the context of the parent scope. This is how you can use it:

<div my-modal my-modal-id="12312" on-click="parentMethod()"></div>

Then in directive you define scope like this:

scope: {
    myModalId: '@',
    onClick: '&'
}

and in directive template:

<div ng-click="onClick()" class="modal-dialog">

Demo: http://plnkr.co/edit/UDnJGRVqXqbCGSFEAMMA?p=preview

Another way (not recommended), you can directly refer the parent scope from isolated directive scope:

<div ng-click="$parent.parentMethod()" class="modal-dialog">

Upvotes: 1

Related Questions