Question

我的网站上有类似以下代码：

<div ng-click=someFunction() my-directive>...</div>
<div ng-show=showMe>...</div>

someFunction（）函数如下所示：

function onSuccess() {
    // do something
    console.log("in response")
}
function someFunction() {
    $http( 
        {
         ...
         }).then(onSuccess);

}

指令my-directive的创建如下：

app.directive(myDirective, function() {
    return {
        restrict: 'A',
        link: function(scope, $elm) {
                $elm.on('click', function() {
                    console.log("in directive");
                    //do something
                });
        }
    }
});

问题是我需要指令才能在onSuccess完成它加载之前而不是之前触发（即，我想在“指令”之前在控制台中看到“响应”，现在我看到“在指令“第一个”

看起来有些可行，但我找不到...... 任何帮助/想法将不胜感激！

编辑：我刚看到这个答案：Wait for data in controller before link function is run in AngularJS directive这不是我想要的，因为函数someFunction独立于指令，我希望它尽可能独立（函数放在app的控制器中）我不想直接从那里操纵视图。

编辑2：我知道使用超时的可能性，但我宁愿使用更通用的解决方案。有了超时，我不得不猜测要等多久，我不想依赖它。

编辑3：我将函数someFunction编辑为更具体的函数。我无法改变someFunction的结构，我不想在onSuccess中执行该指令的工作。

再次感谢！

Answer 1

如果向同一元素添加多个事件侦听器，它们将按addEventListener()调用的顺序执行。例如

e.addEventListener('click', function(){ console.log('Click 1'); });
e.addEventListener('click', function(){ console.log('Click 2'); });

首先显示“Click 1”然后“Click 2”。对于Angular来说，情况似乎并非如此，因为你说该指令首先触发。

如果你可以修改指令，我只需要等待100毫秒左右。

link: function(scope, $elm) {
    $elm.on('click', function() {
        $timeout(function(){
            console.log("in directive");
                //do something
            });
        }, 100);
    }

让控制器有时间去做。

Answer 2

我建议你使用另一个approch。不要使用ng-click，而是将你的功能传递给你的指令

app.directive(myDirective, function() {
   return {
       restrict: 'A',
       link: function(scope, $elm, iattrs) {
            $elm.on('click', function() {
                scope.$eval(iattrs.myDirective)
                .then(function(response) {
                   console.log("in directive");
                   //do something
                });
            });
       }
   }
});

请看这个plunker：https://plnkr.co/edit/PaV6cCn0NmpBIVaJGAEL?p=preview

它假设函数返回一个承诺

如何在返回另一个函数后调用Angularjs指令？

2 个答案: