使用指令或ng-click更改AngularJS中的预览

Question

所以我对angularjs很新，并在js中编写了一个函数，我想弄清楚如何转换为我猜一个指令。

我有一个使用ng-repeat的图像库来加载一系列图像。在图像的右侧，我有一个预览块，显示更大的图像版本，并根据点击的图像更新信息。

我的问题是，单击图像时更新预览区域的最佳方法是什么？我应该创建指令还是使用图像上的ng-click来调用函数？

注意 - 所有数据和图像都是单个对象的一部分。

这是我使用js更新它的方式。

$('.box').on('click','.mainbox',function(){
    var imgid = this.id;
    $('#preview-img').attr('src', collection[imgid].smImg);
    $('#preview-title').text(collection[imgid].title);
    $('#preview-year').text(collection[imgid].years);
    $('#preview-desc').text(collection[imgid].description);
});

Answer 1

我不知道你的html是怎样的，但是说它看起来像这样：

<div ng-controller="myCtrl">
    <div class="mainbox">
        <img ng-repeat="image in images" src="{{ image.url }} "
             ng-click="setSelectedImage(image)" />
    </div>

    <div id="preview">
        <img src="{{ selectedImage.url }}" />
        <h1>{{ selectedImage.title }}</h1>
        <h3 class="years">{{ selectedImage.years }}</h3>
        <p class="description">{{ selectedImage.description }}</p>
    </div>
</div>

您的控制器代码可能如下所示：

function myCtrl($scope) {
    $scope.images = [
        { url: "urlOfFirst.png", title: "Image1" .. },
        { url: "urlOfSecond.png", title: "Image2" .. }
    ];

    $scope.setSelectedImage = function(image) {
        $scope.selectedImage = image;
    }
}

请参阅this jsfiddle作为示例