即使我改变了图像，图像也没有改变答案

【问题标题】：Image is not changing even i changed image即使我改变了图像，图像也没有改变
【发布时间】：2017-06-13 18:03:11
【问题描述】：

在 angularjs 中，如果我更改或删除图像，它不会进行任何更改。刷新页面后显示更改的图像。我正在使用以下行删除图像

jQuery

$('#profile_image').val('')

【问题讨论】：

那么在jquery 已经想这样做的时候为什么还要使用角度？
好的，但我怎么能从角度做到这一点？
您好，您显示的图像是什么格式的？网址还是 Base64？？
嗨，实际上我在数据库中插入图像路径并将图像存储在文件夹中。从该文件夹中我通过 mysql 查询显示相应的图像。我真的不知道什么是 URL 或 basse64 图像格式跨度>

标签： angularjs

【解决方案1】：

如果您想了解更多关于AngularJs的基本示例，请点击链接

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

app.controller("ctrl", [
  "$scope",
  function($scope) {
    $scope.imgShow = true;
    $scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";

    $scope.display = function() {
      $scope.imgShow = true;
      $scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";
    }

    $scope.change = function() {
      $scope.imgSrc = "https://www.gravatar.com/avatar/fccd71b79b3571b459cdfe40e7bf5dd8?s=32&d=identicon&r=PG&f=1";
    }

    $scope.remove = function() {
      $scope.imgShow = false;
    }

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <img ng-src="{{imgSrc}}" ng-show="imgShow">
  <hr/>
  <button ng-click="display()" ng-hide="imgShow">display image</button>
  <button ng-click="change()">change image</button>
  <button ng-click="remove()">remove image</button>
</div>

【讨论】：

实际上我正在使用添加用户定义的图像。当我想删除图像时，我正在使用 Change 当我想添加图片
@Vivekvetrri 不要使用 angular.element(this).scope() ，因为如果您按照文档中的建议禁用生产调试信息，它将不起作用。 .scope() 方法只能用于测试/调试。
@Vivekvetrri 请更新有关<input type="file"> 用法的问题，因为问题没有很好地形成。

【解决方案2】：

如果你想在 AngularJS 中操作 DOM，你应该使用directives for this purpose。

您应该避免在控制器内部使用jquery，而只使用您的模型。下面是 fileUpload 指令，它可以帮助您以更 angularjs 的方式使用 <input type="file">：

angular.module('myApp', [])
.controller('TestController', ['$scope', function ($scope) {
    var ctrl = this;
    
    ctrl.imageFile = null;
    ctrl.clearFile = clearFile;
    
    function clearFile(){
      ctrl.imageFile = null;
    }
    
    $scope.$ctrl = ctrl;
}])
.directive('fileUpload', [function () {
  return {
    require: "ngModel",
    restrict: 'A',
    link: function ($scope, el, attrs, ngModel) {
      function onChange (event) {
        //update bindings with $applyAsync
        $scope.$applyAsync(function(){
          ngModel.$setViewValue(event.target.files[0]);
        });
      }
      //change event handler
      el.on('change', onChange);
      
      //set up a $watch for the ngModel.$viewValue
      $scope.$watch(function () {
        return ngModel.$viewValue;
      }, function (value) {
        //clear input value if model was cleared
        if (!value) {
          el.val("");
        }
      });
      //remove change event handler on $destroy
      $scope.$on('$destroy', function(){
        el.off('change', onChange);
      });
    }
  };
}]);

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.20/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="TestController">
    <input type="file" file-upload ng-model="$ctrl.imageFile" />
    <input type="button" ng-click="$ctrl.clearFile()" value="Reset" />
    <div ng-if="$ctrl.imageFile">
      {{$ctrl.imageFile.name}}<br />
      {{$ctrl.imageFile.size}} byte(s)<br/>
      {{$ctrl.imageFile.type}}
    </div>
  </div>
</div>

更新：还可以查看this useful reading。

【讨论】：

@Vivekvetrri 这对您有帮助吗？