Javascript 绑定嵌套元素

我正在学习angularjs，几乎没有web开发的经验，所以我不确定我是否遵循了解决以下问题的正确方法

我有一个控制器：

    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开关，如下所示：

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


{{message.body}
{{message.body}
{{message.body}

但问题是嵌套元素没有绑定到消息的属性。我想我错过了什么

这是一把小提琴

还有-我还没有写我自己的指令，因为在我开始学习如何创建我自己的指令之前，我需要让它工作。
你有几个问题。一个接一个

1） 。对图像和iframe使用
ng src
属性，而不是
src
（您还应该关闭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>

这里有张便条。不是每个Youtube url都会加载到iframe中，但只加载那些充当
http://www.youtube.com/embed/{id}

演示：可能没有引起问题，但在
{message.body}
之后将
Image
更改为
img
app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'http://www.youtube.com/embed/**'
    ]);
});