Question

我是棱角分明的新手，我还在努力学习，有一件事我遇到过，需要知道我是否可以使用链接，控制器，在一个指令中一起编译？

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

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

Answer 1

链接功能是编译功能的一部分。如果定义了compile，则覆盖编译功能，预链接功能和后链接功能。您可以像这样编写编译函数：

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

Answer 2

一旦DOM准备就绪，角度js处理dom并遍历元素并调用相关的编译函数（实现模板级别更改），然后创建元素的实例然后链接函数（默认帖子链接）被称为

预链接 - 实现AngularJS已编译子元素时要执行的逻辑。
发布链接 - 以相反的顺序调用它以确保所有孩子的在父母之前迭代。

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

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

在指令中一起使用链接，编译和控制器功能

2 个答案: