如何从指令angularjs调用另一个指令

Question

我想在loginForm指令中调用alertForm指令。 我要在“ loginForm”中调用“ alertForm”指令的位置突出显示为//i want to call here

alertForm指令

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

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

Answer 1

在app/directives/loginForm/loginForm.html添加以下行：

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

现在在loginForm指令的控制器内： //我想在这里调用 use

$scope.showAlert = true;

注意：您可以使用一些变量来设置主题和描述，以及在alertForm中。

Answer 2

您可以使用指令的require config。

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

您可以在代码中实现

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