當我在UI中將它與angular js模型綁定時，圖像未呈現為文本

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>

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

向您的控制器添加一個包含相關信息的數據結構：

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

看這里： 小提琴