角度指令不存在于DOM中

角度指令不存在于DOM中,第1张

我希望有一条指令可用于分组ng-ifng-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应该有一个红色链接。

最佳答案:

5 个答案:

答案 0 :(得分:0)

试试这个:

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。

答案 1 :(得分:0)

试试这个

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

答案 2 :(得分:0)

对于ng-if,您可以使用ng-if-startng-if-end,非常类似于ng-repeat-startng-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-startng-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

工作

为实现这一目标,我怀疑ngIfngSwitchWhen在定义时必须使用multiElement选项。

答案 3 :(得分:0)

这个怎么样:

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

答案 4 :(得分:0)

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

unsigned

一样

然后:

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

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

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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复