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/

基本上爲「angularize」它，你必須創建控制器，並添加要在點擊其範圍調用該方法。

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