Question

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

的jQuery

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

Answer 1

如果您想了解更多有关 AngularJs 点击链接
的信息，请参阅此示例

＆＃13;

Dim OrigSelection As New ShapeRange
OrigSelection.Add s5
Dim gp1 As Shape
Set gp1 = OrigSelection.Group

＆＃13;

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;
    }

  }
]);

＆＃13;

Answer 2

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

您应该避免在控制器中使用jquery，只需使用您的模型即可。以下fileUpload指令可以帮助您以更有棱角的方式使用<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。

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

2 个答案: