CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Max
Max

Reputation: 185

Angularjs directives call function from Parent's controller

Since my issue was just a missing word in the code, I'm going to write the way to do it.

I think It may helps other learners.

List of files :

Your app.js is using route Provider to display your view. In this example you only have one view, which is page.html. This page is controlled by mycontroller.js.

You want your page.html to display few directives, each one is very different in terms of design, so you have putted the template in mydirectives.html.

The file that is managing your directives is mydirectives.js.

Our example will be to call a function which is declared in mycontroller.js from mydirective.html. The function will simply send an alert.

app.controller('mycontroller', function ($scope) {
    $scope.sendAlert = function () {
        alert("It works !");    
    }
 });

Now you are defining your directives mydirective.html. We will just add a simple button for the example.

... your design

<button ng-click="callFunction()" type="button">Call the function</button>

... end of your design

Now that you have your directive set up, you need to manage it using your file mydirectives.js, which can contain multiples directives.

app.directive('test', function() {
    return {
        restrict: 'E',
        templateUrl: 'mydirectives.html',
        scope : {
            callFunction: "=call",
        }
    };
});

Now you can add the directive in your page.html. It is defined. Don't forget to add the function ;).

<test call="callFunction"></test>

Don't forget to add include all the files in your project, and now it's working !

Upvotes: 1

Views: 45

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11283

Did you forget to pass the scope test="test"?

<dir1 test="test" ng-show="showdir1">

</dir1>

<dir2 test="test" ng-show="showdir2">

</dir2>

Upvotes: 1

Related Questions