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

Question

我想创建如下指令：

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

所以当 x=true 时，它会做一些 css 并在顶部淡出一个微调器 div，然后当 x=false 时，微调器会淡出。我想将 div（被 css 隐藏）附加到父 div，而不是替换内容。我当前的代码在这里，但是 ngRefreshingWhen 没有触发 ng-if:

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

我设置：

 $scope.refreshing = false;

所以 "refreshing" 文本不应该存在... 我怎样才能做到这一点？

Answer 1

您应该可以使用 transclude 并将 HTML 放入 template:...

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: '='
            }
        };
    });

如果HTML比较复杂，把它放在一个单独的文件中，然后使用templateUrl。

http://plnkr.co/edit/28Eq0HARKF0KXpYJwBTS?p=preview

Answer 2

        <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');
      }
    };
  });

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

我做的不同，我在里面添加了指令，然后将需要的 class 添加到它的父级，结果相同，只是添加了一个元素而不是尝试向父级添加属性。

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

How to Append Dynamic Template in AngularJS Directive

angularjs

angular-directive