JS-Schieberegler kann nicht in Angular-Direktive geändert werden

Question

Ich habe Probleme, meinen Schieberegler in Angular zu ändern. Hier ist mein Code, das funktioniert:

<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> 

Und wenn ich Eckige muss ich es ändern, und er funktioniert nicht:

<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> 

Was mache ich falsch?

Answer 1

ng-click ist eine Winkel-Direktive, die die von Ihnen aufgerufene Funktion changeimage benötigt, um im Bereich dieses Controllers zu sein. Ich habe ein funktionierendes Beispiel aus Ihrem Code erstellt, das Sie hier überprüfen können. https://jsfiddle.net/9bz4Lwxa/112/

Um "eckig" zu machen, müssen Sie Controller erstellen und die Methode hinzufügen, die Sie aufrufen möchten, klicken Sie auf den Bereich.

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>