使用指令或 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示例

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

Use directive or ng-click to change preview in AngularJS

javascript

jquery

angularjs

angularjs-directive

angularjs-ng-click