我正在学习angularjs，我几乎没有网络开发的经验，所以我不确定我是否正在采取正确的方法解决以下问题。
我有这个控制器：
function MessagesController ($scope) {
$scope.messages = [{
body:"This is a video",
type:"Video",
linkvalue:"http://www.youtube.com/watch?v=sIR3KAfhqZQ"
},
{
body:"this is an image",
type:"Image",
linkvalue:"http://www.dimensionsinfo.com/wp-content/uploads/2009/12/Smallest-Violin.jpg"
},
{
body:"this is just text",
type:"NText",
linkvalue: null
}
];
}
在我看来，我想根据邮件的类型选择一个模板，所以我使用了ng-repeat，并在其中使用了ng-switch，如下所示：
<div ng-controller="MessagesController">
<div ng-repeat="message in messages">
<div ng-switch on="message.type">
<div ng-switch-when="Image">
{{message.body}}
<img src="message.linkvalue" width="420" height="345"/>
</div>
<div ng-switch-when="Video">
{{message.body}}
<iframe src="message.linkvalue" width="420" height="345"/>
</div>
<div ng-switch-when="NText">
{{message.body}}
</div>
</div>
</div>
</div>
但问题是嵌套元素不会绑定到消息的属性。我想我错过了什么。
这是一个小提琴http://jsfiddle.net/DT74d/
另外 - 我还没有编写自己的指令，因为在开始学习如何创建自己的指令之前，我需要让这个工作正常工作。
答案 0 :(得分：2)
你有几个问题。一个接一个。
1）。使用ng-src属性代替src用于图片和iframe（您还应该关闭iframe代码）。
固定模板如下所示：
<div data-ng-repeat="message in messages">
<div ng-switch on="message.type">
<div ng-switch-when="Image">
{{message.body}}
<img ng-src="{{message.linkvalue}}" width="420" height="345" />
</div>
<div ng-switch-when="Video">
{{message.body}}
<iframe ng-src="{{message.linkvalue}}" allowfullscreen frameborder="0" width="420" height="345"></iframe>
</div>
<div ng-switch-when="NText">{{message.body}}</div>
</div>
</div>
2）。您应该whitelist外部YouTube管理网址，以便在iframe中加载它们：
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'http://www.youtube.com/embed/**'
]);
});
这里有一个注释。并非每个Youtube网址都会加载到iframe中，但只会加载为http://www.youtube.com/embed/{id}。