41

我正在创建一个<row>AngularJS 指令，该指令需要<row>用一个可以包含任何 HTML 代码的动态模板替换自身（执行后该标签不能出现在 DOM 中）。

使用的问题replace: true是它不适用于表格的<tr>标签，并且模板是动态选择的。

所以我试图找到一种方法来替换链接函数中的元素，但没有成功。

出于未知原因使用 jQuery 的.replaceWith()中断。ngRepeat

有什么提示吗？

这是小提琴

4

2 回答 2

101

马克的回答会奏效，但是，这个例子太有限，无法展示整个画面。虽然 Mark 的指令对于常见和简单的 UI 组件可能确实足够，但对于更复杂的操作，该模式是一种应该避免的模式。下面我详细解释一下这背后的原因。事实上，Angular已经提供了一种更简单的方法来用模板替换指令元素。它可以在这个答案的底部找到。

以下是指令在幕后的样子：

.directive('row', function ($compile) {
  return {
      restrict: 'E',
      scope: {
          items: "="
      },

      // Whether you define it this way or not, this is the order of
      // operation (execution) behind every AngularJS directive.
      // When you use the more simple syntax, Angular actually generates this
      // structure for you (this is done by the $compile service):

      compile: function CompilingFunction($templateElement, $templateAttributes, transcludeFn) {

        // The compile function hooks you up into the DOM before any scope is
        // applied onto the template. It allows you to read attributes from
        // the directive expression (i.e. tag name, attribute, class name or
        // comment) and manipulate the DOM (and only the DOM) as you wish.

        // When you let Angular generate this portion for you, it basically
        // appends your template into the DOM, and then some ("some" includes
        // the transclude operation, but that's out of the $scope of my answer ;) )

          return function LinkingFunction($scope, $element, $attrs) {

            // The link function is usually what we become familiar with when
            // starting to learn how to use directives. It gets fired after
            // the template has been compiled, providing you a space to
            // manipulate the directive's scope as well as DOM elements.

            var html ='<div ng-repeat="item in items">I should not be red</div>';
            var e = $compile(html)($scope);
            $element.replaceWith(e);
          };
      }
  };
});

我们能从中得到什么？很明显，两次$compile手动调用相同的 DOM 布局是多余的，对性能不利，对牙齿也不利。你应该怎么做？只需在应该编译的地方编译你的 DOM ：

.directive('row', function ($compile) {
  return {
      restrict: 'E',
      template: '<div ng-repeat="item in items">I should not be red</div>',
      scope: {
          items: "="
      },

      compile: function CompilingFunction($templateElement, $templateAttributes) {
          $templateElement.replaceWith(this.template);

          return function LinkingFunction($scope, $element, $attrs) {
            // play with the $scope here, if you need too.
          };
      }
  };
});

如果您想深入了解指令，这里是我喜欢称之为非官方AngularJS 指令参考的内容

一旦你在这里完成了那个头：https ://github.com/angular/angular.js/wiki/Understanding-Directives

现在，正如所承诺的，这是您来这里的解决方案：

使用replace: true：

.directive('row', function ($compile) {
    return {
        restrict: 'E',
        template: '<div ng-repeat="item in items">I should not be red</div>',
        replace: true,
        scope: {
            items: "="
        }
    };
});
于 2013-11-02T23:34:20.180 回答
54

你的小提琴看起来很基本，但你应该可以使用outerHTML

element[0].outerHTML ='<div>I should not be red</div>';

更新的小提琴

如果您必须处理，ng-repeat您可以将您的项目绑定到范围属性并在您编译的模板中引用它们。编译完成后，您可以使用 jQueryreplaceWith()

html

<row items="items">***</row>

指示

.directive('row', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            items: "="
        },
        link: function (scope, element, attrs) {
            var html ='<div ng-repeat="item in items">I should not be red</div>';
            var e =$compile(html)(scope);
            element.replaceWith(e);
        }
    };
});

ng-repeat例子

于 2013-06-13T16:04:53.737 回答