为动态创建的图像添加功能

Question

我正在使用 AngularJS 创建一个简单的搜索功能，它允许您输入中国生肖中的动物名称，并获取兼容动物的图像。我想扩展这个应用程序，以便单击动态创建的元素之一会显示相关的动物列表。

我的第一个想法是在所有图像元素上创建一个单击事件侦听器，但这不适用于 angular。我非常感谢任何指导或帮助。

HTML

<div>
What Animal Are You?<input type="text" ng-model="animal"><input type="submit" ng-click="submit(animal)">
</div>

JS：

$scope.submit = function(submitAnimal){
$scope.disappear=false
$('.your-zodiac').empty()
$('.mortalEnemy').empty()
$('.friendsForever').empty()

$http.get('zodiac.json')
    .then(function(response) {
                var animalsData = response.data.animals
        function loopAnimals(arrayOfAnimals,element){
            for (var index in arrayOfAnimals){
                var animal = arrayOfAnimals[index]
                for (var loopAnimal in animalsData){
                    if(animalsData[loopAnimal].animal==animal){
                        var picture = animalsData[loopAnimal].picture
                        $(element).prepend("<img src='"+ picture +"' alt='"+animal+"'/>")
                        break
                    }
                }
            }
        }
        for (var loopAnimal in animalsData){
            if (animalsData[loopAnimal].animal==submitAnimal){ //compatibility test
                var picture = animalsData[loopAnimal].picture
                $('.your-zodiac').prepend("<img src='"+ picture +"' alt='"+submitAnimal+"'/>")
                var enemies = animalsData[loopAnimal].hate //hate array
                var friends = animalsData[loopAnimal].love
                loopAnimals(enemies,'.mortalEnemy')
                loopAnimals(friends,'.friendsForever')
                break;
            }
        }

    });

Plunkr：http://plnkr.co/edit/9GtvFt5Kbvn1Sb98AXrA?p=preview

Answer 1

我最终为动态图像使用了 jQuery 的事件监听器：

$('#zodiac').on("click",'img',function(){
    var animal = $(this).attr('alt')
    $scope.submit(animal)
})