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

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 6 年前。

Improve this question

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

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

我的问题是单击图像时更新预览区域的最佳方法是什么 - 我应该创建指令还是使用 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>

您的 Controller 代码可能如下所示:

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

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

参见this jsfiddle例如