Question

在我的app.js文件中，我有数据驱动的类，例如文本和图片类。我有一个超链接类，我使用的Href看起来像这样：

div class = "links" ng-if="field.fieldLink">
<a ng-if="content.LinkField.fieldLinkNewTab !== false" target="_blank" 
ng-href="{{ content.fieldLink.fieldLinkHref }}">{{ 
content.fieldLink.fieldLinkText }}</a>
<a ng-if="content.fieldLink.fieldLinkNewTab === false" ng-href="{{ 
content.fieldLink.fieldLinkHref }}">{{ 
content.fieldLink.fieldLinkText }} </a>
</div>

所以这样我可以在我的.JS文件中轻松使用它：

fieldLink
{
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",

我遇到的问题是为图像创建一个字段：

fieldLinkImage: "documents/pictures/etc.jpg"
fieldLinkHref:  "www.etc.com",

点击图片会将我重定向到网址。

我可以在我的.html文件中完成此操作，只需将图像包装在类中，但我想在我的.JS文件中选择图像。

如果不对.html文件中的链接和图像进行硬编码，我该怎么做？

谢谢！

Answer 1

对此抱歉，但我会批评你的代码。首先要指出的是，您的第一个LinkField元素中的fieldLink应该是<a>。

接下来，为什么你要比较！==假，你可以检查var是真还是真（只是把变量放在条件中 - 不需要与任何东西比较 - 如果它存在或者是真的它将是真实的）。

同样要创建一个新元素只是因为你需要有不同的属性是坏的，你会得到大量的代码并在某些时候丢失。而是使用ng-attr-target，它会在一行中给你相同的东西 - 根据条件放置目标（或任何其他）属性。

但是当然所有这些都可以修复，因为你没有提供jsfiddle或者类似的东西，所以我会对你的数据结构进行猜测。我猜你有一个包含图像或链接的对象列表，你想根据显示链接或图像的类型将它们放在一些ng-repeat中。

所以这将是你的数据对象：

let contentObj = [{
    fieldLink: {
      fieldLinkNewTab: false,
      fieldLinkHref: "www.etc.com",
      fieldLinkText: "click here for random website",
    }
  }, {
    fieldLink: {
      fieldLinkNewTab: true,
      fieldLinkHref: "www.etc.com",
      fieldLinkImage: "https://images.pexels.com/photos/590490/pexels-photo-590490.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
    }
  }];

这将是你的html，如果fieldLinkText在那里它将显示文本，如果fieldLinkImage在那里它将显示图像，请记住，如果你有两个它将显示两者，也通过利用ng-attr-target的力量你在html中显示一个元素而不是两个用ng-if：

<div class="links" ng-repeat="content in contentObj" ng-if="content.fieldLink">
      <a ng-attr-target="{{(content.fieldLink.fieldLinkNewTab) ? '_blank' : undefined}}" ng-href="{{ content.fieldLink.fieldLinkHref }}">
        <span ng-if="content.fieldLink.fieldLinkText">{{ content.fieldLink.fieldLinkText }}</span>
        <img class="image-class" ng-if="content.fieldLink.fieldLinkImage" src="{{content.fieldLink.fieldLinkImage}}" alt="" />
      </a>
    </div>

我希望这有用，我不是故意过于批评，如果我对此感到抱歉，但这些事情将来会对你有所帮助。这是你可以改变你的数据的小提琴，调整一下：https://jsfiddle.net/pegla/j392Lvdp/3/

AngularJS：创建一个我可以在app.js文件中使用的类来使用超链接图片

1 个答案: