如何在AngularJS指令中附加动态模板

我想创建一个指令，如：

<div ng-refreshing-when="x">Some Content In Here</div>

所以“刷新”文本不应该在那里。。。

---

我怎样才能做到这一点

您应该能够使用

transclude

并将HTML放入

模板：

angular.module('ngRefreshingWhen',[])
    .directive('ngRefreshingWhen', function ($compile) {
        return {
            restrict: 'A',
            transclude: true,
            template: '<div class="refresher" ng-if="ngRefreshingWhen"><p>Refreshing</p></div><div ng-if="!ngRefreshingWhen" ng-transclude></div>',
            scope: {
                ngRefreshingWhen: '='
            }
        };
    });

angular.module（'ngRefreshingWhen'，[]）
.directive（'ngRefreshingWhen'，函数（$compile）{
返回{
限制：“A”，
是的，
模板：“刷新”
，
范围：{
ngRefreshingWhen:“=”
}
};
});

如果HTML更复杂，请将其放在单独的文件中，并使用

templateUrl

一些我想保留的东西

&

angular.module（'ngRefreshingWhen'，[]）
.directive（'ngRefreshingWhen'，函数（$compile）{
返回{
限制：“A”，
范围：{
ngRefreshingWhen:“=”
},
模板：“”，
链接：函数（范围、元素、属性）{
//添加有复习课
element.parent（）.addClass（'has-refresher'）；
}
};
});

---

我的做法与此不同，我在内部添加了指令，然后将所需的类添加到其父级，结果相同，只是添加了一个元素，而不是尝试向父级添加一个属性。

不同的方法，但这是否可行？作为旁注，不建议创建以

ng-

开头的自定义指令，因为

ng-

意味着指令是在核心框架中实现的。@Claies谢谢，will doI知道如何使用模板和trnasclusion，但问题是我需要将一个类应用于div，然后将模板代码添加到指令div中的“某些内容”后面。

angular.module('ngRefreshingWhen',[])
    .directive('ngRefreshingWhen', function ($compile) {
        return {
            restrict: 'A',
            transclude: true,
            template: '<div class="refresher" ng-if="ngRefreshingWhen"><p>Refreshing</p></div><div ng-if="!ngRefreshingWhen" ng-transclude></div>',
            scope: {
                ngRefreshingWhen: '='
            }
        };
    });

        <div> <!-- Parent Div -->
          <div ng-refreshing-when="refreshing"></div>
          <p>Some Stuff I Want to Keep</p>
        </div>

angular.module('ngRefreshingWhen', [])
  .directive('ngRefreshingWhen', function($compile) {
    return {
      restrict: 'A',
      scope: {
        ngRefreshingWhen: '='
      },
      template: '<div class="refresher" ng-if="ngRefreshingWhen"><i class="fa fa-spin fa-refresh"></i></div>',
      link: function(scope, element, attrs) {
        // add has-refresher class
        element.parent().addClass('has-refresher');
      }
    };
  });