使用属性指令获取元素的子元素答案

【问题标题】：Getting the children of an element with an attribute directive使用属性指令获取元素的子元素
【发布时间】：2014-11-12 05:43:18
【问题描述】：

我有一个仅限于属性的指令。我想做两件事中的任何一件。如果满足某个条件，我想使用具有指令属性的元素的子元素作为模型（即内容），或者如果不满足该条件，那么我想从服务中进行数据绑定，因此指令将用我得到的东西代替孩子。我有一个执行后者的指令，但我发现在编译器进入并用它的模板替换它之前很难让它抓住孩子......如果可能的话，有人知道这是怎么做的吗？

【问题讨论】：

能否提供代码示例
好的，这里是该概念的解释示例。我有一个属性指令，它使元素位于特殊的数据驱动控件上。它进入服务并询问它将显示的实际内容，并且任何标记或子项都将被替换。标记看起来像这样：plnkr.co/edit/zDva4fs9UieI4Jwlgt57 但是，如果服务回复没有数据，那么我希望指令恢复为使用页面上的实际标记（预角度编译），因此指令将获取该
元素并将其粘贴在模型中。有点像 transclude 但我想在模型中使用它

标签： angularjs angularjs-directive

【解决方案1】：

我认为您在指令的link（或compile）函数中寻找的是element.context。

在您的 link 函数（pre 或 post）中，找到指令的原始元素存储在传入元素的 context 属性中。因此，如果您的服务调用没有返回数据，您可以通过 element.replaceWith(element.context) 将编译后的元素替换为原始元素。

所以你的指令看起来像这样：

.directive('ttContent', ['mySvc', function (mySvc) {

  return {
    restrict: 'A',
    replace: true,
    transclude: false,
    template: '<div class="content new-content" ng-bind-html="htmlContent | sanitize"></div>',
    scope: {
      testDataReturned: '@'
    },
    link: {
      pre: function (scope, element, attrs) {
      },
      post: function (scope, element, attrs){
        mySvc.fetchContent().then(function success(data){
            if (data) {
              scope.htmlContent = data;
            } else {
              // element.context is our original, pre-compiled element
              element.replaceWith(element.context);
            }
          }, function fail(data){
            element.replaceWith(element.context);
        });
      }
    }
  };
}]);

这是plunk。

【讨论】：

MikeJ，先生，你是我的英雄：D