Question

我有一个<div>我希望有条件地换行<a>，如下所示：

<a>
  <div>Stuff that I always want to see</div>
</a>

如果我在ng-if上使用<a>，它也会隐藏<div>。如果某个变量是false，我希望<div>只是它本身。

如果变量为<div>，我可以使用<a>代替<a>，然后将其设置为true，但我希望有更好的方法。

谢谢！

Answer 1

根据布尔值

创建一个使用angular.element.wrap()的指令

类似的东西：

<div link-wrap="wraplinks" url="http://google.com"></div>

JS

app.controller('MainCtrl', function($scope) { 
  $scope.wraplinks = true;
});

app.directive('linkWrap', function() {
  return {
    restrict: 'A',
    scope: {
      url: '@',
      linkWrap: '='
    },
    link: function(scope, elem) {
      scope.$watch('linkWrap', function(nVal, oVal){
        if(nVal){
           elem.wrap('<a href="' + scope.url +'"></a>')
        }else{
          if(elem.parent()[0].tagName=='A'){
            elem.parent().replaceWith(elem)
          }
        }
      });
    }
  }
});

的 DEMO

Angular - 条件包装块

1 个答案: