Question

我想要实现的是取决于范围变量DOM元素将改变类型..

所以说我有一个范围变量如：

<a href="#/post/{{post.slug}}">
    <div style="background-image: url({{post.featured_image}});">
        <small ng-if="post.category">{{post.category}}</small>
        <h3>{{post.title}}</h3>
    </div>
</a>

和DOM元素如：

$scope.post.slug

但是如果var <div> <div style="background-image: url({{post.featured_image}});"> <small ng-if="post.category">{{post.category}}</small> <h3>{{post.title}}</h3> </div> </div>为空，那么DOM元素将如下所示：

ng-if

显然我可以执行<{{post.slug ? 'a href="#/post/'+post.slug+'"' : 'div'}}> <div style="background-image: url({{post.featured_image}});"> <small ng-if="post.category">{{post.category}}</small> <h3>{{post.title}}</h3> </div> </{{post.slug ? 'a' : 'div'}}>并复制每一段代码，但我试图避免这种情况！

这样的事情是理想的：

{{1}}

Answer 1

我认为你不能用棱角直接达到这个目的。在角度注入之前需要定义HTML。但对于这种情况，我认为使用控制器逻辑中的函数来控制锚是一个更好的选择。只需使用div和 ng-click ='yourFunction（）'设置DOM，如果存在post.slug，请使用 angular的路由系统进行导航。

Answer 2

自定义指令允许您执行ng-if以确定<a>标记或<div>标记而不会污染您的视图。指令中的ngTransclude包含您的内容。

查看：

<div ng-repeat="post in posts">
    <div slug-link="post.slug">
        <div style="background-image: url({{post.featured_image}});">
            <small ng-if="post.category">{{post.category}}</small>
            <h3>{{post.title}}</h3>
         </div>
    </div>
</div>

指令：

.directive('slugLink', function()
{
  return {
    transclude: true,
    scope: {
      slug: '=slugLink'
    },
    template: '<a ng-href="{{slug}}" ng-if="slug" ng-transclude></a><div ng-if="slug == \'\'" ng-transclude></div>'
  };
});

请参阅Plunkr

中的完整来源

根据AngularJS变量更改DOM元素类型

2 个答案: