2016-06-07 71 views
0

我是新来的角,我仍然试图学习很多,有一件事我遇到过,需要知道我是否可以使用链接,控制器,编译所有在一起在一个单一的指令?在指令中使用链接,编译和控制器功能

例如,这是一个例子,我在一些指令中工作,同时看着输出,我发现这个链接功能不起作用。任何理由不工作,或者我犯了一个明显的错误。

CODE

angular.module('app').directive('movies', function() { 
    return { 
    templateUrl: "movieCard.html", 
    restrict: "EA", 
    scope: { }, 
    link: function(scope, element, attrs) { 
     console.log("link function called"); 
    }, 
    controller: function($scope) { 
     console.log("controller function called"); 
    }, 
    compile: function(elem,attrss){ 
     console.log("compile function called"); 
    } 
    } 

}) 

我创建了Plunker

回答

1

Link功能是编译功能的一部分。如果你定义了编译,你可以重写编译函数,前链接函数和后链接函数。 你可以写你的编译功能是这样的:

compile: function(elem,attrss){ 
    console.log("compile function called"); 
    return { 
     pre: function() { console.log("pre link function called"); }, 
     post: function() { console.log("post link function called, it's the same of link function"); } 
    } 
} 

所以没用到指令定义链接如果重写编译功能。并且链接不会被调用。 我创建了一个小蹦蹦跳跳者来说明它https://plnkr.co/edit/hbel2uGzbyp0VHfQS4pN?p=preview。以该顺序

角呼叫功能:

  • 创建指令的范围从顶部(取决于配置)
  • 解析DOM来底部(DOM的foreach节点)
    • 呼叫编译功能
    • 呼叫控制器功能
    • 呼叫预先链接功能
  • 解析DOM从底部到顶部
    • 调用后链接功能

我建议你阅读这篇文章Angular directives - when and how to use compile, controller, pre-link and post-link

+0

确定了问题的实质,但仍需要知道你为什么不,我们在编译函数作为参数传递范围,如果前后都是编译功能的部分怎么来的,我们能直接将范围传递给前后。我现在很困惑。 –

+0

我只写了我的前后链接函数,但角度传递给post和pre函数的多个参数,如范围。我用参数编辑plunker – Silvinus

0

一旦DOM准备就绪后,角JS流程dom并遍历元素并调用相关联的编译函数(实现模板级别更改)和ele的实例创建发言:然后链接功能(默认值后链接)被称为

  1. 预链接 - 落实执行逻辑时AngularJS已经编制的子元素。
  2. 文章链接 - 它被调用的顺序相反,以确保所有孩子的 迭代在父代之前。

因此,在ng-repeat的情况下,如果我们想要对所有元素进行更改,那么我们应该在编译函数中添加该代码,否则如果实例级别高于链接函数即可以有多个元素实例,但只有一个模板元素。

参考http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

相关问题