使用属性字符串绑定的指令实现建议

Question

我是AngularJS和指令的新手，正在就我执行的指令寻求一些建议或指导。有问题的指令将用于向用户显示pdf。该指令公开了两个属性，documentPath和documentType，它们是使用隔离作用域定义的，如下所示：

    var directiveDefinition = {
        templateUrl: 'app/views/directives/document.html', 
        scope: {
            documentPath: '@documentPath', 
            documentType: '@documentType' 
        },
        restrict: 'E',                                  
        templateNamespace: 'html',
        link: linkFunc
    };

在使用该指令的视图中，我使用视图控制器的模型属性和字符串绑定属性。

<my-document document-path="{{ application.documentpath }}" document-type="Application"></my-document>

当我最初运行该指令时，我发现该指令有时会在模型返回数据之前运行。因此将显示一个空文档。其他时候，模型会在指令运行之前加载，因此当链接函数运行时，文档路径会出现，从而允许显示文档。

我决定解决这个问题的一种方法是在指令的documentPath属性上使用$watch侦听器。这似乎解决了问题。

作为AngularJS和指令实现的新手，我的问题是……这是最好的解决方案吗？如有任何建议，我们将不胜感激。谢谢

Answer 1

$watch解决方案应该可以正常工作，但根据应用程序的复杂性和观察者总数，这可能会导致$digest周期缓慢。

另一种选择是使用"."点表示法发送参数作为引用，这样当数据从模型加载时（大多数时候从API加载，因为这是缓慢的部分），而不是发送字符串基元时，它将得到更新。

您的指令范围声明将变为：

scope: {
        documentPath: '=', 
        documentType: '=' 
    },

您将从父视图中使用它，如下所示：

<my-document document-path="application.documentpath" document-type="application.documenttype"></my-document>

如果documentType始终相同，则可以将其保留为字符串范围参数。