How to call another directive from directive angularjs

Question

I want to call alertForm directive in loginForm directive. Where I want call 'alertForm' directive in 'loginForm' is highlighted as //i want to call here

alertForm directive

angular.module('myApp')
    .directive('alertForm', function () {
        return {
            templateUrl: 'app/directives/alert/alertForm.html',
            restrict: 'E',
                scope: {
                   topic: '=topic',
                   description: '=description'
                },
            controller: function($scope) {
                $scope.words = [];

                this.showAlert = function() {
                    $scope.description.push("hello");
                };
            }
        };
    });

loginForm directive

angular.module('myApp')
    .directive('loginForm', function() {
        return {
            templateUrl: 'app/directives/loginForm/loginForm.html',
            restrict: 'E',
            scope: {
                successCallback: '&',
                errorCallback: '&',
                emailField: '='
            },
            link: function (scope, element, attrs) {
            },
            controller: function ($rootScope, $scope, authenticationService) {
                $scope.loginFormData = {};
                $scope.inProgress = false;
                $scope.onLogin = function (form) {
                    if (form.$valid) {
                        $scope.inProgress = true;
                        authenticationService.loginUser('password', $scope.loginFormData).then(function () {
                            $scope.successCallback({formData: $scope.loginFormData});
                        }, function (err) {
                            $scope.inProgress = false;
                            if (err.message) {
                                **// i want to call here**
                            }
                        });
                    }
                }
            }
        };
    });

Possible duplicate of Use an angular directive inside another directive — Krupesh Kotecha
– Krupesh Kotecha, Commented Nov 18, 2015 at 6:51

Vivek · Accepted Answer · 2015-11-18 07:10:57Z

1

You can use require config of directive.

When a directive requires a controller, it receives that controller as the fourth argument of its link function. Ref : Documentation

You can implement this in your code

angular.module(‘myApp')
    .directive('loginForm', function() {
        return {
            templateUrl: 'app/directives/loginForm/loginForm.html',
            restrict: 'E',
            require:'alertForm',
            scope: {
                successCallback: '&',
                errorCallback: '&',
                emailField: '='
            },
            link: function (scope, element, attrs, alertFormCtrl) {
                scope.alertFormCtrl = alertFormCtrl;
            },
            controller: function ($rootScope, $scope, authenticationService) {
                $scope.loginFormData = {};
                $scope.inProgress = false;
                $scope.onLogin = function (form) {
                    if (form.$valid) {
                        $scope.inProgress = true;
                        authenticationService.loginUser('password', $scope.loginFormData).then(function () {
                            $scope.successCallback({formData: $scope.loginFormData});
                        }, function (err) {
                            $scope.inProgress = false;
                            if (err.message) {
                                // Calling showAlert function of alertFormCtrl
                               $scope.alertFormCtrl.showAlert();
                            }
                        });
                    }
                }
            }
        };
    });

answered Nov 18, 2015 at 7:10

Vivek

13.6k19 gold badges101 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pyae Phyoe Shein Over a year ago

where "alertFormCtrl" coming from? Do I need to create new controller called "alertFormCtrl"?

Vivek Over a year ago

@ppshein Read the 2nd line of my answer.

Vivek Over a year ago

@ppshein I've added require:'alertForm' config. This injects alertFormCtrl to the link function. So you don't need to create new controller 'alertFormCtrl '.

Sujeet Jaiswal · Accepted Answer · 2015-11-18 06:57:13Z

1

Add the following line in the app/directives/loginForm/loginForm.html :

<alertForm topic="something" description = "something" ng-if="showAlert"></alertForm>

Now inside the loginForm directive's controller : // i want to call here use

$scope.showAlert = true;

Note: you can use some variable to setup the topic and description as well inside the alertForm.

answered Nov 18, 2015 at 6:57

Sujeet Jaiswal

1,0897 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to call another directive from directive angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related