javascript - 为什么单击按钮时图像没有改变？

Question

你能告诉我为什么我的图像在按钮上没有改变吗点击这里是我的代码

http://plnkr.co/edit/zQPp1vya27a5UaCJmbE7?p=preview

<button ng-click="clik()">chnage image</button>

$scope.clik = function(){

      setTimeout(function (){
         alert('xxx')
        $scope.ca = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQDjJroJg1iyhupdjD6h3xslZw7UGyza9Fafv05zjlbwoQt6_D"
      },1000)
    }

Answer 1

你有两个问题。首先，您应该使用 $timeout，这样您就不必告诉 Angular 它需要经历摘要周期并更新所有绑定(bind)。因此，任何有 setTimeout(...) 的地方都可以使用 $timeout(...)

  setTimeout(function (){
     alert('xxx')
    $scope.ca = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQDjJroJg1iyhupdjD6h3xslZw7UGyza9Fafv05zjlbwoQt6_D"
  },1000)

  //would be
  $timeout(function (){
     alert('xxx')
    $scope.ca = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQDjJroJg1iyhupdjD6h3xslZw7UGyza9Fafv05zjlbwoQt6_D"
  },1000)

第二个问题是您在尝试绘制图像之前没有等待图像加载:

setTimeout(()=>{
  resetImage();
},0)

这不够长，无法加载图像。而是使用加载事件来检测它何时加载，然后运行 ​​resetImage()。

angular.element("#image").bind('load', resetImage);

---

演示

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

  $scope.ca = 'https://media.glassdoor.com/brand-logo/white-logotype/glassdoor-logo.jpg'
  $scope.imageArray = ['https://pbs.twimg.com/profile_images/2504398687/344204969_400x400.jpg', 'https://media.glassdoor.com/brand-logo/white-logotype/glassdoor-logo.jpg'];

  $scope.getImage = function(data) {
    return data;
  };
  $scope.onImageClick = function(data, index) {

    $scope.ca = data;
    $scope.currentImageIndex = index;

  };
  $scope.clik = function() {
    $timeout(function() {
      $scope.ca = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQDjJroJg1iyhupdjD6h3xslZw7UGyza9Fafv05zjlbwoQt6_D";
    }, 1000);

  };

})

app.directive('imageViewer', function($timeout) {
  return {
    restrict: 'EA',
    template: '<div style="padding:10px;">\
                    <button id="girardir" class="btn btn-primary btn-sm" ng-disabled="noImage"><span class="glyphicon glyphicon-menu-left"> </span> Rotate Anti-clockwise</button>\
                    <button id="giraresq" class="btn btn-primary btn-sm" ng-disabled="noImage">Rotate Clockwise <span class="glyphicon glyphicon-menu-right"> </span></button>\
                    <button id="zoomIn" class="btn btn-info btn-sm" ng-disabled="noImage"><span class="glyphicon glyphicon-zoom-in"> </span> Zoom In</button>\
                    <button id="zoomOut" class="btn btn-info btn-sm" ng-disabled="noImage"><span class="glyphicon glyphicon-zoom-out"> </span> Zoom Out</button>\
                    </div>\
                    <div id="image-zoom" style="padding:10px;">\
                    <h2 class="text-center text-danger" id="error-message" style="border:1px solid #000;display:none;padding:20px">Image Not Available</h2>\
                    <canvas id="canvas" height="350" data-girar="0" style="border:1px solid #000;z-index:555555;cursor:grab;position:inherit;">sdsd</canvas>\
                    <img ng-src="{{image}}" id="image" (load)="resetImage()" style="display:none" /> </div>',
    scope: {
      src: '='
    },
    link: function(scope, element, attr) {
      scope.$watch('src', function(src) {
        if (src) {
          scope.image = src;
        }
      });
      scope.noImage = false;

      var canvas = document.getElementById('canvas');
      var image = document.getElementById('image');
      var element = canvas.getContext("2d");
      var angleInDegrees = 0;
      var zoomDelta = 0.1;
      var currentScale = 1;
      var currentAngle = 0;
      var canvasWidth = 500;
      var novosDadosTRBL;
      var novosDadosWH;
      var novosDadosW;
      var novosDadosH;
      var startX, startY, isDown = false;
      scope.flag = 1;

      $timeout(function() {
        canvas.width = angular.element('#image-zoom').width();
        canvas.width = canvasWidth;
      }, 0);

      angular.element('#carregar').click(function() {
        angular.element('#image').on('load', resetImage())
          .on('error', function() {
            angular.element('#canvas').hide();
            scope.noImage = true;
            angular.element('#error-message').show();
            console.log("error loading image");
          });

      });

      //add image load event
      angular.element("#image").bind('load', resetImage);
      
      function resetImage() {
        image = document.getElementById('image');
        element = canvas.getContext("2d");
        angleInDegrees = 0;
        currentScale = 1;
        currentAngle = 0;

        if (scope.flag) {
          scope.flag = 0;
          drawImage();
          element.translate(canvas.width / 2, canvas.height / 2);
          $timeout(function() {
            angular.element('#canvas').attr('data-girar', 0);
            drawImage();
          }, 0);
        } else {
          element.translate(0, 0);
          angular.element('#canvas').attr('data-girar', 0);
          drawImage();
        }
      };

      angular.element('#giraresq').click(function() {
        angleInDegrees = 90;
        currentAngle += angleInDegrees;
        drawImage();
      });


      angular.element('#girardir').click(function() {
        angleInDegrees = -90;
        currentAngle += angleInDegrees;
        drawImage();
      });

      angular.element('#zoomIn').click(function() {
        currentScale += zoomDelta;
        drawImage();
      });

      angular.element('#canvas').bind('mousewheel DOMMouseScroll', function(event) {
        if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
          currentScale += zoomDelta;
          drawImage();
        } else {
          if (currentScale - zoomDelta - 0.1 > 0) {
            currentScale -= zoomDelta;
            drawImage();
          }
        }
      });

      angular.element('#zoomOut').click(function() {
        if (currentScale > 0.12) {
          currentScale -= zoomDelta;
        }
        drawImage();
      });

      canvas.onmousedown = function(e) {
        var pos = getMousePos(canvas, e);
        startX = pos.x;
        startY = pos.y;
        isDown = true;
      }

      canvas.onmousemove = function(e) {
        if (isDown === true) {
          var pos = getMousePos(canvas, e);
          var x = pos.x;
          var y = pos.y;

          element.translate(x - startX, y - startY);
          drawImage();

          startX = x;
          startY = y;
        }
      }

      window.onmouseup = function(e) {
        isDown = false;
      }

      function drawImage() {
        clear();
        element.save();
        element.scale(currentScale, currentScale);
        element.rotate(currentAngle * Math.PI / 180);
        element.drawImage(image, -image.width / 2, -image.height / 2);
        element.restore();
      }

      function clear() {
        element.clearRect(-2000, -2000, 5000, 5000);
      }

      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
    }
  }
});

.error {
  corder: 1px solid red;
}

.imgContainer ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: scroll;
  width: 100%;
}

.imgContainer ul li {
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d3dcd5c7ded3c09cd8c1f2839c879cca" rel="noreferrer noopener nofollow">[email protected]</a>" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <div class="imgContainer" ng-if="imageArray && imageArray.length">
    <ul>
      <li ng-repeat="img in imageArray"><img data-ng-src="{{getImage(img)}}" width="100" height="100" ng-click="onImageClick(img,$index)" /></li>
    </ul>
  </div>
  <image-viewer src="ca"></image-viewer>
  <button ng-click="clik()">chnage image</button>

</div>

Plunker if needed