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;

所以＆＃34;刷新＆＃34;文字不应该在那里...... 我怎么能做到这一点？

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

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

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

2 个答案: