如何从控制器函数 [AngularJS] 调用指令 - How to call directive from controller function [AngularJS]

How to call directive from controller function [AngularJS]

在

ajax 请求成功后，如何从控制器调用某些指令？

例如，如果我有函数：

function successAjax()
{
   call directive
}

如果我在模板中有：

<directive></directive>

应该出现：

<p>success</p>

您有几种选择可以按照自己的方式进行。如果我是你，我会把你的 AJAX 调用移到你的指令中，以完全回避这个问题（更好的是：将 AJAX 调用移动到注入指令的服务）：

angular.module('app').directive('directive', [
    '$http',
    function($http) {
        return {
            link: link,
            scope: {}
        };
        function link(scope, elem, attrs) {
            scope.doAjax = doAjax;
            function doAjax() {
                $http.get('url').then(function() {
                    elem.append('<p>success</p>');
                });
            }
        }
    }
]);

如果绝对必须在控制器中进行 AJAX 调用，则可以使用事件，但应避免使用这些事件，因为它们会阻塞摘要循环：

// Controller
function doAjax() {
    $http.get('url').then(function() {
        $scope.$broadcast('some.event.descriptor');
    });
}
// Directive
function link(scope, elem, attrs) {
    scope.$on('some.event.descriptor', function() {
        elem.append('<p>success</p>');
    });
}

您拥有的另一个选项是将来自控制器的一些数据绑定到指令：

// Controller
$scope.someData = '';
$http.get('url').then(function() {
    $scope.someData = 'success';
});
<!-- Controller Template -->
<directive data-something="someData"></directive>
// Directive
function() {
    return {
        scope: {
            something: '='
        }
    };
}
<!-- Directive Template -->
<p>{{ something }}</p>

您应该创建另一个服务，您将在其上设置一个值以通知请求已完成。然后在指令中，您将监视该服务中的变量，并使用ng-if <</p>

div class="answers" 在指令的模板中显示消息>

首先，我觉得没有必要在使用指令调用 ajax 后显示成功消息。Angularjs 使用$q服务来处理 http 调用并返回 promise 对象，并在控制器中处理它，之后您可以从控制器范围将成功消息绑定到您的视图。

如果要从控制器触发指令，可以使用$broadcast将事件发送到整个$rootScope并在指令中处理该事件。

例：

$rootScope.$broadcast('myFunction',{});

在指令中：

scope.$on('myFunction',function(event, data){
  // Do what ever you want to do
});

希望对您有所帮助。谢谢。