Question

首先，如果以下问题听起来很愚蠢，我真的很抱歉。我知道有文件，但没有足够的例子，我对它很新
我试图创建一个可能使用ng-repeat的指令但是，当链接指令时，ng-repeat根本没有被评估过。所以每当我尝试在postlink函数中调用jQuery函数时，jQuery就无法工作。

<div my-directive>
  <div ng-repeat="image in images">
    <img ng-src="image">
  </div>
</div>

范围包含以下内容：

scope.images = ['http://placehold.it/100x100', 'http://placehold.it/100x100'];

在指令中我大致如下：

angular.module('mymodule', []).directive('myDirective', function factory() {
  return {
    restrict: 'A',
    compile: function (tElement, tAttrs, transclude) {
      // #1
      return {
        pre: function preLink(scope, iElement, iAttrs, transclude) {
          // #2
        },
        post: function postLink (scope, iElement, iAttrs, controller) {
          // #3
        }
      };
    },
    link: function postLink(scope, iElement, iAttrs) {
      // jQuery code to convert the element
      // #4
    }
  };
});

此外，将代码置于上面的＃1，＃2，＃3和＃4之间有什么区别？这里的经验法则是什么？在哪里放置像jQueryUI的$( "#datepicker" ).datepicker();这样的代码？因为根据我的理解，该函数将操纵（转换）元素及其子元素感谢。

Answer 1

地点之间的主要区别（解释here，编译功能和链接功能章节）是#1是的 compile function 即可。在这里，您应该练习任何DOM转换，在克隆的情况下，应该克隆到所有元素。这不适用于Datepicker，因为它不仅修改DOM，还需要从中侦听事件。如果你添加一个带有指令的子元素，或者如果你向children元素添加一个指令，那么如果你在这里执行它，它仍会被编译。

#2是 preLinking function ，将在编译后调用，但在子项链接功能之前调用。这意味着您无法更改DOM，因为下一个链接器迭代将尝试通过编译功能找到先前索引的元素并且将失败。 #3是 postLinking function ，在所有儿童被关联后调用，并且它是应用单一修改，听取事件和做任何整洁事情的最安全的地方

您还可以返回function而不是{pre: , post: }对象。在这种情况下，它与#3（postLinking function）具有相同的行为。最后，#4与#3相同。如果您有#3，则会被忽略。

如果有多个指令，在元素本身或其子元素中，所有 compile function 都会运行，而不是所有 preLinking functions ，的 postLinking functions

现在，对于主要问题：#3，如果您需要编译功能。如果没有，只需删除compile属性即可转到#4。

制定fiddle to illustrate这些行为。

关于未加载的图片，您应该将<img ng-src="image">更改为<img ng-src="{{image}}">，因为您需要Angular来插入src属性。

在jQuery的其他指令中使用ng-repeat

1 个答案: