javascript - Angular 理解链接函数

Question

我正在尝试找出何时以及如何在 Angular Directive(指令)中使用 link 函数。

假设我有以下指令:

    app.directive("lbArticle", function() {
    return {
        restrict : "E",
        templateUrl: 'tpl/directives/information/article.html',
        scope: {
            article: '='
        },
        link: function(scope,element, attr){
            scope.info = attr.article;
        }
    };
});

现在将对象传递给 HTML 的 article 附件

<lb-article article='{{myObject}}'> </lb-article>

当发生这种情况并且指令被渲染时，它应该设置一个名为 info 的变量等于 myObject

所以如果 myObject 看起来像这样:

myObject{name: 'Hello', created: '2015-04-04'; }

然后下面应该显示这些变量:

我的指令 html

   <span class="block text-ellipsis">{{info.name}}</span>
    <small class="text-muted">{{info.created | fromNow}}</small>

但是这行不通吗？

据我所知，link 函数 应该用于DOM 操作以及设置可能在实际指令之前呈现的变量？

Answer 1

这一行 scope.info = attr.article;是多余的，因为您可以访问 article通过双向绑定(bind) =article .所以你可以替换所有出现的 info与 article在模板中，因为它在范围内可用。您还需要从 <lb-article article='{{myObject}}'> </lb-article> 中删除花括号双向绑定(bind)工作，因为你想要一个对象的引用。

有一个不错的、易于理解的 article关于指令，涵盖了大部分这些概念(链接/编译函数、双向/单向绑定(bind)、范围等)。