Reputation: 42454
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
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
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">
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