Question

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

Answer 1

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

在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。

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

1 个答案: