Question

我在构建使用其内容作为模板的指令时遇到了问题。在这种特殊情况下，该指令正在调用Web服务来获取一些子元素。内部html可能有也可能没有ng-repeat。以下是部分内容，简化它们以简化它们：

<div my-children="1">
  {{children.length}}
      <ul>
        <li ng-repeat="kid in children">
          {{kid.name}}
        </li>
      </ul>
</div>

我的期望是，具有指令属性的元素内部的任何内容都将被编译并用于模板。

指令（简化）是：

app.directive('myChildren', function($compile, $timeout) {
  return {
    restrict: 'A',
    scope: {
      myChildren: '='
    },
    compile: function(tElement, tAttrs, transclude) {
      tElement.append(transclude(tElement));
    },
    link: function(scope, element, attr) {
      scope.children = [];

      scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
          if (fn && (typeof(fn) === 'function')) {
            fn();
          }
        } else {
          this.$apply(fn);
        }
      };

      scope.$watch('myChildren', function(newVal) {
        if (!newVal) return;
        // mock our service call with timeout
        $timeout(function() {
          scope.children = [{
            id: 1,
            name: "one"
          }, {
            id: 2,
            name: "two"
          }];
          scope.safeApply();
        }, 400)

      });
    }
  }

})

以下是一个非工作示例：http://plnkr.co/edit/ZidQ4oBdpYxdg5Fyqe0P?p=preview

Answer 1

试试这个

Example using directive template

我没有使用transclude，我通常把我的所有html都放在模板或templateUrl中

如果我需要'动态'改变我的html基础，我将构建一个不同的指令并使用ng-switch或ngShow / ngHide，它更容易调试

Answer 2

这比我想象的要简单得多。

        template: function (tElement, tAttrs) {
            return tElement.html();
        }

http://plnkr.co/edit/nzvl83hlmjqO0uy08T9h?p=preview

使用其内容作为模板的指令

2 个答案: