为什么单击按钮后图像没有改变？

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需要经历一个摘要周期并更新所有绑定。因此，您有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="angular.js@1.5.x" 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