Question

我希望有一条指令可用于分组ng-if或ng-switch-when，如：

<empty ng-switch-when="expression">
  ... Lots of little DOM nodes ...
</empty>

如果我这样做

.directive('empty', function() {
  return {
    restrict: 'E',
  };
})

然后它可以工作，但在DOM中仍然有一个<empty>，CSS选择器正在应用（特别有问题的是直接子选择器）。那么我可以完全从DOM中获取它吗？

例如：http://plnkr.co/edit/FBFHS7A66he73xA2wlNy?p=preview应该有一个红色链接。

Answer 1

试试这个

app.directive('empty', function() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
        element.replaceWith($compile(element.contents())(scope));
    }
  };
})

演示 http://plnkr.co/edit/2cbpiWOIW5EUuuDjkbB5?p=preview

Answer 2

你有什么理由不能把它作为评论指令吗？

与unsigned

一样

然后：

> http://localhost:8983/solr/myCore/select?q=lastName%3AHarris*&fq=filterQueryField%3Ared&wt=json&indent=true&facet=true&facet.field=state

https://code.angularjs.org/1.3.16/docs/guide/directive

向下滚动到指令类型以获取更多信息

Answer 3

这个怎么样：

app.directive('empty', function ($compile) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var content = $compile(element.html())(scope);
            element.parent().prepend(content);
            element.remove();
        }
    };
})

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

注意：如果你想确保元素完全在同一个地方，你可以使用jQuery的insertBefore而不是parent().prepend

Answer 4

对于ng-if，您可以使用ng-if-start和ng-if-end，非常类似于ng-repeat-start和ng-repeat-end：

<p ng-if-start="true">First visible paragraph</p>
<p>Another visible paragraph</p>
<p ng-if-end>Last visible paragraph</p>
<p ng-if-start="false">First hidden paragraph</p>
<p>Another hidden paragraph</p>
<p ng-if-end>Last hidden paragraph</p>

可以在http://plnkr.co/edit/c7C0WDx93rMSo3i9Taro?p=preview

工作

对于ng-switch，您可以使用ng-switch-when-start和ng-switch-when-end：

<div ng-switch on="selection">
   <div ng-switch-when-start="a">A 1</div>
   <div>A 2</div>
   <div ng-switch-when-end>A 3</div>
   <div ng-switch-when-start="b">B 1</div>
   <div>B 2</div>
   <div ng-switch-when-end>B 3</div>
 </div>

可以在http://plnkr.co/edit/cRjHcmjODBzwm1BjeSuO?p=preview

工作

为实现这一目标，我怀疑ngIf和ngSwitchWhen在定义时必须使用multiElement选项。

Answer 5

试试这个：

app.directive('empty', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        link: function (scope, element, attrs, ctrl, transclude) {
            transclude(scope, function (content) {
                element.replaceWith(content);
            });
        }
    };
})

或者您也可以使用范围。$ parent（取决于您需要的范围），例如

transclude(scope.$parent, function (content) {

工作人员here。

角度指令不存在于DOM中

5 个答案: