Javascript 当我在UI中将图像与angular js模型绑定时，图像没有呈现为文本

我已经为同样的问题创建了一个JSFIDLE

示例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>

示例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>";

var myApp=angular.module（'myAppModule'，[]）；
myApp.controller（'someController'，函数（$scope）{
//在这里做些事情
$scope.showImage=“”；

我试图在前端UI上呈现来自angular js模型的图像，但它是以文本的形式出现的

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

快照

---

向控制器添加包含相关信息的数据结构：

$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>

---

看这里：

你不应该这样做。HTML必须是HTML格式，而不是JS格式。那么正确的方法是什么？如果你想显示/隐藏某些内容，请将其放在HTML中并使用

ngShow/ngHide

指令。你不想用表示法污染JS。如果你想加载模板，请使用

ng include