3

首先，如果以下问题听起来很愚蠢，我真的很抱歉。我知道有文档，但没有足够的例子，我对它很陌生。

我试图创建一个可能使用的指令ng-repeat
但是似乎当指令被链接时，ng-repeat根本没有被评估。因此，每当我尝试在函数内部调用 jQuery 函数postlink时，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();？因为据我了解，该函数将操纵（转换）元素及其子元素。
谢谢。

4

1 回答 1

4

位置之间的主要区别（在此处解释，在编译函数和链接函数章节）#1是compile function. 在这里，您应该练习任何 DOM 转换，在克隆的情况下，应该克隆到所有元素。这不适用于 Datepicker，因为它不仅修改了 DOM，还需要监听其中的事件。如果添加具有指令的子元素，或者将指令添加到子元素，则在此处执行此操作仍会被编译。

#2是and将preLinking function在编译之后调用，但在子链接函数之前。这意味着您无法更改 DOM，因为下一次链接器迭代将尝试通过编译函数查找先前索引的元素并且会失败。#3是postLinking functionand 在所有孩子都被链接之后被调用，它是应用单数修改、监听事件和做任何整洁的事情的最安全的地方。

您也可以返回 afunction而不是{pre: , post: }对象。在这种情况下，它的行为与#3( postLinking function) 相同。最后，#4与 相同#3。当你有#3.

如果有多个指令，在元素本身或其子元素中， allcompile function将运行，而不是 all preLinking functions，然后是 allpostLinking functions

现在，主要问题：#3，如果你需要一个编译功能。如果没有，只需放弃该compile属性并选择#4.

做了一个小提琴来说明这些行为。

关于 image not loading，您应该更改<img ng-src="image">为<img ng-src="{{image}}">您需要 Angular 来插入src属性。

于 2013-03-04T11:46:17.787 回答