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

Question

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

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

$scope.post = {
    title:          'Post title goes here!',
    slug:           'post-title-goes-here',
    category:       'News',
    featured_image: '//src.jpg'
};

还有一个 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>

但如果 var $scope.post.slug 为空，则 DOM 元素将如下所示：

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

显然我可以做一个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'}}>

Answer 1

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

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中查看完整源代码