Question

我有问题将我的滑块更改为Angular。这是我的代码：

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

当我需要Angular时，我改变它并且他不工作：

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

无法将JS滑块更改为Angular指令

1 个答案: