angularjs：-how实现点击div来加载图像

Question

您好我正在尝试在加载div后实现点击事件..

以下是我的html文件： -

<script type="text/ng-template" id="grid-12">
    <div class="row" id="grid-121">
      <div class="col-sm-12" style="border: 1px solid;min-height: 300px;">
        <input ng-click="onChange($file)" ng-show="$state.current.name==='admin'" type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required="">
        <i ng-show="myForm.file.$error.required">*required</i>
        <img ngf-src="picFile" class="img img-responsive">
        <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span>
      </div>
    </div>
  </script>

以下是我的脚本文件： -

$scope.onChange = function(files) {
        $scope.picFile = true;

        if (files) {
          Upload.upload({
            url: 'https://staging.abc.com/v1/admin/images',
            headers: {
              'Access-Token': 'xxx',
              'Api-Token': 'xxx'
            },
            // image:{imageable_type: "DesktopGrid"},
            data: {
              image: {
                image: files,
                imageable_type: 'DesktopGrid'
              }
            }
            //  data: {file: file, 'username': $scope.username}
          }).then(function(resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
          }, function(resp) {
            console.log('Error status: ' + resp.status);
          }, function(evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            //console.log('progress: ' + progressPercentage + '% ' + evt.config.data.image.image.name);
            // the above code is to show for percentage code push in console
          });
        }
      }
      // code written below to get the entire html element and display it..implement on click
    $http.get('url').then(function(response) {
      var raw_html = response.data;
      var raw_angular = angular.element(document.querySelector('#panel_html'));

      var angular_body_html = raw_angular.context.innerHTML
        // console.log(angular_body_html) // this is getting the actual html

      $scope.angular_body_html = raw_angular.context.innerHTML
        //  console.log(angular_body_html) // this is getting the actual html
    });

    //The below is the HTML used to save the html template
    $scope.submit = function(file) {
      debugger;
      if ($scope.myForm.$valid && $scope.selectedImages.length > 0) {
        $scope.upload($scope.picFile);
        var raw_angular = angular.element(document.querySelector('#panel_html'));
        $scope.angular_body_html = raw_angular.context.innerHTML;

       var data = jsona;

        $http.post('http://192.168.3.333/v1/admin/statics/upload_home', data, function() {}, "json")
          .success(function(data, status, headers, config) {
            console.log("The data is" + data + "The status is" + status + "The header is" + headers + "The config is" + config)
            $scope.mainHomeData = data; 
          })
          .error(function(data, status, header, config) {
            $scope.ResponseDetails = "Data: " + data +
              "<hr />status: " + status +
              "<hr />headers: " + header +
              "<hr />config: " + config;
          });
        alert("condition satisfied")
      }
    };
    $scope.clickbutton = function() {
      console.log($scope.angular_body_html);
    };

    $scope.updateValue = function(item, newName) {
      item.name = newName;
    };

    $scope.AppendText = function() {
      var myEl = angular.element(document.querySelector('#admincopy'));
      myEl.append($scope.angular_body_html);
    };
    // have to give the latest path to upload the images..working and going inside the function
    $scope.imageArray = [];
    $scope.upload = function(file) {
      var cont = document.getElementsByClassName('img img-responsive');
      for (var i = 0; i < cont.length; i++) {
        var image_source = cont[i].currentSrc;

        $scope.imageArray.push(image_source);
        console.log($scope.imageArray);
      }


      // console.log(cont);
    };

    function isInArray(value, array) {
      return array.indexOf(value) > -1;
    }
    // for multiple files:

    $scope.opencard = [];
    $scope.image_imp = {}

    $scope.deleteRow = function(index, layout) {
      $scope.selectedLayouts.splice(index, 1);
    }

从上面的文件我们可以看到我有一个按钮事件来调用onChange函数..这个函数用于选择文件和调用api来保存图像以供进一步使用..

但是想要在div为空或图像存在于div中时调用该函数。

如果我尝试在主div上调用click事件..我可以通过ng-click调用该函数.Am卡在此

请帮我解决这个问题。谢谢