javascript - 当我在 UI 中将其与 Angular JS 模型绑定(bind)时，图像未呈现为文本

Question

我已经为相同的 jsfiddle 创建了一个 jsfiddle

示例 HTML 代码

<div ng-app="myAppModule" ng-controller="someController">
<!-- Show the name in the browser -->
<!-- Bind the input to the name -->
<span ng-bind="showImage"></span>
</div>
<script>

</script>

示例 Angular JS 代码

var myApp = angular.module('myAppModule', []);
myApp.controller('someController', function($scope) {
// do some stuff here
$scope.showImage="<a class='fancybox' href='http://i.imgur.com/9VFmFrN.jpg' data-fancybox-group='gallery' title='Personalized Title'><img class='MaxUploadedSmallSized' src='http://i.imgur.com/9VFmFrNs.jpg' alt=''></a>";

我正在尝试在前端 UI 上从 Angular JS 模型渲染图像，但它以文本形式出现。

我也尝试过 Angular js 的 $compile 属性，但这也不起作用。

快照

Answer 1

向 Controller 添加包含相关信息的数据结构:

$scope.showImage=[];
$scope.showImage.Link='http://i.imgur.com/9VFmFrN.jpg';
$scope.showImage.Source='http://i.imgur.com/9VFmFrN.jpg';     
$scope.showImage.Title='Personalized Title';

在 html 中访问它，就像使用模板引擎一样:

<div>
  <a class='fancybox' ng-href='{{showImage.Link}}' data-fancybox-group='gallery' title='{{showImage.Title}}'><img class='MaxUploadedSmallSized' ng-src='{{showImage.Source}}' alt=''></a>
</div>

看这里:Fiddle