javascript - 延迟 AngularJs 中指令的处理

Question

我需要推迟对嵌套在另一个指令中的指令的处理，直到嵌套指令执行异步操作。这很容易用两行 JQuery 来完成，但我想知道是否有一种纯粹的 Angular 方法来做同样的事情，也许使用 $q。

在http://jsfiddle.net/4smtgs3f/1/你可以找到我的意思的例子:

<div ng-controller="MyCtrl">
    <loadData url="http://ip.jsontest.com/">
        <transformAndOutput/>
    </loadData>
</div>

loadData 从一些 URI 加载数据，而一个或多个转换器处理数据的处理和显示。顺便说一句，在 JSFiddle 中我使用了两个不同的 loadData 指令:loadData1 异步使用 $http 并且无法及时加载数据，而 loadData2 使用 JQuery $.ajax 同步并且可以工作很好。

所以问题是:$http 只能异步工作，内部指令在异步加载操作完成之前 被处理。是否 Angular 方法来获得相同的结果？

我知道可以使用 then 或 $q 或其他东西来延迟用户定义函数的执行，但我可以延迟指令的处理吗？我该怎么办？

感谢您所做的一切。

FV

Answer 1

您对“Angular 方式”的思考还不够。 :)

时间问题

您在 link 函数中创建指令内容，这意味着您的所有内容都必须在那时可用。正如您所注意到的，这是一个错误的假设。必须允许在新数据可用时更新内容(即异步操作完成时)。

Angular 操纵 DOM 的方式是双向绑定(bind)。代替指令显示 content 的惯用方法是为指令编写模板。

function myDirective() {
    return {
        ...
        template: '<div>{{someVar}}</div>',
        ...
    };
}

使用这种技术，DOM 将在每次 content 更新时更新(这就是我们使用 Angular 的原因吧？)。将模板添加到您的 transformAndOutput 指令，并删除 link 函数中的 elm.append 行。现在，当异步回调更新 content 时，DOM 将更新以反射(reflect)更改。

DEMO

您会注意到，在这个新演示中，两行都显示 The value of content as called by loadData2 is: 2.0.171.17，这不是您所期望的。这就引出了第二个问题。

范围界定

指令通常应该有自己的、独立的作用域，这样它们就不会“弄脏”宿主作用域，或者与其他组件发生冲突。在您提供的代码中，您的两个指令都通过读写 scope.data 和 scope.callingFunction 来修改它们的宿主作用域，因此存在冲突。

要使指令具有自己的作用域，请使用 scope 选项。

function myDirective() {
    return {
        ...
        scope: true,
        ...
    };
}

指令作用域不继承宿主作用域。但是，您可以从主机范围导入一些数据。我不会在这里详细说明，因为不需要回答这个问题。请引用Angular's Guide to Directives .

另一方面，嵌套指令的作用域确实继承自父指令的作用域。这意味着 transformAndOutput 指令可以访问其父 loadData 范围的属性。您应该通过将 require: '^loadData' 选项添加到 transformAndOutput 来编码 transformAndOutput 需要父级 loadData(在演示中它是 loadData1 或 loadData2 所以我无法添加此选项)。

将 scope: true 添加到您的 loadData1 和 loadData2 指令，以便它们每个都有自己的 content 和调用函数。这些变量的先前持有者 - Controller - 现在可以安全地移除。

DEMO

最后一件小事:你的指令应该在 HTML 中使用类似 HTML 的名称(小写 + 破折号)，在 JS 中使用类似 JS 的名称(驼峰式)。转换由 Angular 自动处理。

最终代码

app.directive('loadData1', function($http) {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        link: function(scope, elm, attrs) {
            scope.callingFunction = 'loadData1'
            // the following to remove bad CORS warnings
            delete $http.defaults.headers.common['X-Requested-With'];   
            $http.get(attrs.url).success(function(data) {
                scope.content = data.ip;
            })  
        },
    };
})


app.directive('transformAndOutput', function() {
    return {
        restrict: 'E',
        scope: true,
        template: '<p>The value of content as called by {{callingFunction}} is: {{content}}</p>',
    };
})