如何从指令angularjs调用另一个指令 [英] How to call another directive from directive angularjs

问题描述

我想在 loginForm 指令中调用 alertForm 指令.我要在"loginForm"中调用"alertForm"指令的位置突出显示为//我想在此处调用

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指令

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指令

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**
                            }
                        });
                    }
                }
            }
        };
    });

推荐答案

您可以使用指令的 require 配置.

You can use require config of directive.

当指令需要控制器时，它将接收该控制器作为其链接函数的第四个参数.参考:文档

您可以在代码中实现

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();
                            }
                        });
                    }
                }
            }
        };
    });

这篇关于如何从指令angularjs调用另一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！