Невозможно изменить слайдер JS на Угловую директиву

Question

У меня проблема с изменением слайдера на угловое. Вот мой код, который работает:

<div id="main-img" class="main-img"> 
    <img id="img" src="image.jpg"> 
</div> 
<div id="thumb-img" class="thumb-img" > 
    <img src='image.jpg' onclick='changeImage("image.jpg");'> 
    <img src='image1.jpg' onclick='changeImage("image1.jpg");'> 
</div> 
<script> 
    function changeImage(a) { 
     document.getElementById("img").src=a; 
    } 
</script> 

И когда мне нужно Угловая я изменить его, и он не работает:

<div id="main-img" class="main-img"> 
     <img id="img" ng-src="{{some.image1}}"> 
    </div> 
    <div id="thumb-img" class="thumb-img" > 
     <img ng-src='{{some.image1}}' ng-click='changeImage("{{some.image1}}");'> 
     <img ng-src='{{some.image2}}' ng-click='changeImage("{{some.image2}}");'> 
    <script> 
     function changeImage(a) { 
      document.getElementById("img").src=a; 
     } 
    </script> 

Что я делаю неправильно?

Answer 1

ng-click - это угловая директива, которая нуждается в функции, которую вы вызываете changeimage, чтобы быть в рамках этого контроллера. Я создал рабочий пример из вашего кода, который вы можете проверить здесь. https://jsfiddle.net/9bz4Lwxa/112/

В принципе, для «угловатости» вам необходимо создать контроллер и добавить метод, который вы хотите вызвать, щелкнуть по его области.

JavaScript:

angular.module('demoApp', []) 
.controller('SliderController', ["$scope",function ($scope) { 
    $scope.changeImage = function (a) { 
     document.getElementById("img").src= a; 
    }; 
}]); 

Html:

<div ng-app="demoApp" ng-controller="SliderController"> 
    <div id="main-img" class="main-img"> 
    <img id="img" src="image1.jpg"> 
    </div> 

    <div id="thumb-img" class="thumb-img"> 
    <img src='image1.jpg' ng-click='changeImage("image1.jpg");'> 
    <img src='image2.jpg' ng-click='changeImage("image2.jpg");'> 
    </div> 

</div>