Call function from directive without isolated scope

Question

I have read this post. However, in that example he calls the controller function after listening on a click event of the element.

How can I achieve calling a controller function when clicking children of the directive element?

    <div ng-controller="MyCtrl">
    <abc method1="outerMethod('c')" method2="outerMethod2('g')"></abc>
</div>

Directive:

var myApp = angular.module('myApp',[]);

myApp.directive('abc', function() {
    return {
        restrict: "EA",
        replace: true,
        template: "<div><p ng-click='clickedP()'>p</p><div ng-click='clickedDiv()'>div</div></div>",
        controller: function($scope) {
            // how can I call outerMethod if clickedP is executed???
            // how can I call outerMethod2 if clickedDiv is executed???
        },
        controllerAs: "vm",
        link: function(scope, element, attrs, vm) {

        }
    }
});


function MyCtrl($scope) {
    $scope.outerMethod = function( a ) {
        alert( "you did it" );
    }
        $scope.outerMethod2 = function( a ) {
        alert( "you did it again" );
    }
}

Fiddle: http://jsfiddle.net/j93ba7a2/5/

the `ng-click` inside a div will call the controller function ,as you have not using isolated scope..Directive will refer the scope where element is placed — Pankaj Parkar, Jul 07 '15 at 14:51
How does this answer my question? How can I call the passed in function from my directive controller then? — Shlomo, Jul 07 '15 at 21:16
As I understood you wanted to call the controller function `callMe2` & it should be done using.. — Pankaj Parkar, Jul 07 '15 at 21:18
Can you post the code please? I want to call the callMe1(param) function from my directive — Shlomo, Jul 07 '15 at 21:21
Do you mean to say `ng-click='callMe2(param)'` method is going to change on the basis of value provided in `method` object of `ng-repeat` — Pankaj Parkar, Jul 07 '15 at 21:24
See http://jsfiddle.net/j93ba7a2/ `` calls your controller function on click, exactly as @PankajParkar said. — Daniel Beck, Jul 07 '15 at 21:42
sorry i made a mistake in the fiddle. the outer is not a ng-click but a custom attribute! Please see this fiddle http://jsfiddle.net/j93ba7a2/2/ — Shlomo, Jul 07 '15 at 21:51
What are you expecting the "method" attribute on to do? You said you wanted this triggered on click, for that you would use ng-click. — Daniel Beck, Jul 07 '15 at 21:57
I do not want to set a ng-click in my directive itself, only in the template. See my code, imagine I have 3 divs, each with a ng-click leading to another method. How can I achieve this then? I want the "method" function to be executed, if the user clicks on the child div of my directive template — Shlomo, Jul 07 '15 at 21:59
You want the function whose name is contained in the "method" attribute to be called when the user clicks the directive? That seems unnecessarily convoluted. Can you be clearer about what you're trying to accomplish here? — Daniel Beck, Jul 07 '15 at 22:03
See my fiddle please, it explains my wish http://jsfiddle.net/j93ba7a2/5/ — Shlomo, Jul 07 '15 at 22:03
No I dont want anything to happen when the user clicks the directive. I want something to happen if the user clicks children elements of the directive — Shlomo, Jul 07 '15 at 22:07

score 1 · Accepted Answer · answered Jul 07 '15 at 22:44

The scope can be used directly without passing attributes. Also, using "controllerAs" on a directive with the same value as the parent controller is a bad idea, since it will overwrite it.

Solution:

var myApp = angular.module('myApp', []);

myApp.directive('abc', function () {
    return {
        restrict: "EA",
        replace: true,
        template: "<div><p ng-click='clickedP()'>p</p><div ng-click='clickedDiv()'>div</div></div>",
        controller: function ($scope) {

            // how can I call outerMethod if clickedP is executed???
            $scope.clickedP = function () {
                $scope.outerMethod(); // you just call it!
            }
            // how can I call outerMethod2 if clickedDiv is executed???
            $scope.clickedDiv = function () {
                $scope.outerMethod2(); //Same way!
            }

        },
        controllerAs: "vm",
        link: function (scope, element, attrs, vm) {

            /* It would have been better to handle clickedP and 
               clickedDiv here instead of in the controller, but I'm 
               trying to avoid confusion by changing as little as 
               possible of your code. */

        }
    }
});

function MyCtrl($scope) {
    $scope.outerMethod = function (a) {
        alert("you did it");
    }
    $scope.outerMethod2 = function (a) {
        alert("you did it again");
    }

Call function from directive without isolated scope

1 Answers1