我有一个<div>我想有条件地包裹在<a>中,如下所示:

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


如果在ng-if上使用<a>,则也会隐藏<div>。如果某个变量是false,我希望<div>本身就可以。

我可以使用<div>代替<a>,然后如果变量为<a>,则将其样式化为true,但我希望会有更好的方法。

谢谢!

最佳答案

创建一个根据布尔值使用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

10-05 20:29
查看更多