Как я могу вызвать событие click для другого элемента в ng-click, используя angularjs?

Ответ 1

Если ваш вход и кнопка являются братьями и сестрами (и они находятся в вашем случае OP):

<input id="upload"
    type="file"
    ng-file-select="onFileSelect($files)"
    style="display: none;">

<button type="button" uploadfile>Upload</button>

Используйте директиву для привязки щелчка кнопки к входному файлу следующим образом:

app.directive('uploadfile', function () {
    return {
      restrict: 'A',
      link: function(scope, element) {

        element.bind('click', function(e) {
            angular.element(e.target).siblings('#upload').trigger('click');
        });
      }
    };
});

Ответ 2

Итак, это было простое исправление. Просто пришлось переместить ng-click в обработчик кликов области:

<input id="upload"
    type="file"
    ng-file-select="onFileSelect($files)"
    style="display: none;">

<button type="button"
    ng-click="clickUpload()">Upload</button>



$scope.clickUpload = function(){
    angular.element('#upload').trigger('click');
};

Ответ 3

У меня была эта же проблема, и эта скрипка - это shizzle:) Она использует директиву для правильного стиля поля файла, и вы даже можете сделать это образ или что-то еще.

http://jsfiddle.net/stereosteve/v5Rdc/7/

/*globals angular:true*/
var buttonApp = angular.module('buttonApp', [])

buttonApp.directive('fileButton', function() {
  return {
    link: function(scope, element, attributes) {

      var el = angular.element(element)
      var button = el.children()[0]

      el.css({
        position: 'relative',
        overflow: 'hidden',
        width: button.offsetWidth,
        height: button.offsetHeight
      })

      var fileInput = angular.element('<input type="file" multiple />')
      fileInput.css({
        position: 'absolute',
        top: 0,
        left: 0,
        'z-index': '2',
        width: '100%',
        height: '100%',
        opacity: '0',
        cursor: 'pointer'
      })

      el.append(fileInput)


    }
  }
})

<div ng-app="buttonApp">

  <div file-button>
    <button class='btn btn-success btn-large'>Select your awesome file</button>
  </div>

  <div file-button>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
  </div>

</div>

Ответ 4

Если вы получаете ошибки привязки $scope, убедитесь, что вы завершаете код события click в функции setTimeout.

VIEW

<input id="upload"
    type="file"
    ng-file-select="onFileSelect($files)"
    style="display: none;">

<button type="button"
    ng-click="clickUpload()">Upload</button>

CONTROLLER

$scope.clickUpload = function(){
    setTimeout(function () {
      angular.element('#upload').trigger('click');
    }, 0);
};

Ответ 5

для jqLite просто используйте triggerHandler с именем события, чтобы имитировать "click" try:

angular.element("tr").triggerHandler("click");

Ответ 6

Просто имейте их в одном контроллере и сделайте что-то вроде этого:

HTML:

<input id="upload"
    type="file"
    ng-file-select="onFileSelect($files)"
    style="display: none;">

<button type="button"
    ng-click="startUpload()">Upload</button>

JS:

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.files = [];
  $scope.startUpload = function(){
    for (var i = 0; i < $scope.files.length; i++) {
      $upload($scope.files[i]);
    } 
  }
  $scope.onFileSelect = function($files) {
     $scope.files = $files;
  };
}];

Это, на мой взгляд, лучший способ сделать это в angular. Использование jQuery для поиска элемента и запуска события не является лучшей практикой.

Ответ 7

Я только что наткнулся на эту проблему и написал решение для тех из вас, кто использует Angular. Вы можете написать настраиваемую директиву, состоящую из контейнера, кнопки и элемента ввода с файлом типа. С помощью CSS вы помещаете ввод через настраиваемую кнопку, но с непрозрачностью 0. Вы устанавливаете высоту и ширину контейнеров точно в ширину и высоту смещения кнопки, а высота ввода и ширину - до 100% от контейнера.

директива

angular.module('myCoolApp')
  .directive('fileButton', function () {
    return {
      templateUrl: 'components/directives/fileButton/fileButton.html',
      restrict: 'E',
      link: function (scope, element, attributes) {

        var container = angular.element('.file-upload-container');
        var button = angular.element('.file-upload-button');

        container.css({
            position: 'relative',
            overflow: 'hidden',
            width: button.offsetWidth,
            height: button.offsetHeight
        })

      }

    };
  });

шаблон нефрита, если вы используете нефрит

div(class="file-upload-container") 
    button(class="file-upload-button") +
    input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")  

тот же шаблон в html, если вы используете html

<div class="file-upload-container">
   <button class="file-upload-button"></button>
   <input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" /> 
</div>

css

.file-upload-button {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
    background: transparent;
    font-size: 66px;
    padding-top: 0px;
    border-radius: 5px;
    border: 2px solid rgb(255, 228, 0); 
    color: rgb(255, 228, 0);
}
.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

Ответ 8

Решение, как указывалось другими ответами, заключается в использовании

angular.element(element).trigger(event);

Вот пример того, как я произвольно выбираю несколько элементов select:

$scope.randomize = function(){
    var games = [].slice.call(document.querySelectorAll('.games select'));

    games.forEach(function(e){
        // Logically change the element (Angular won't know about this)
        e.selectedIndex = parseInt(Math.random() * 100, 10) < 50 ? 1 : 2;

        // Manually tell Angular that the DOM has changed
        angular.element(e).trigger('change');
    });
};

Ответ 9

Я взял ответ, отправленный Osiloke (который был самым простым и самым полным imho), и я добавил слушателя изменений событий. Прекрасно работает! Спасибо Осилоке. Если вы заинтересованы, см. Ниже:

HTML:

  <div file-button>
        <button class='btn btn-success btn-large'>Select your awesome file</button>
   </div>

Директива

app.directive('fileButton', function() {
  return {
    link: function(scope, element, attributes) {

      var el = angular.element(element)
      var button = el.children()[0]

      el.css({
        position: 'relative',
        overflow: 'hidden',
        width: button.offsetWidth,
        height: button.offsetHeight
      })

      var fileInput = angular.element('<input id='+scope.file_button_id+' type="file" multiple />')
      fileInput.css({
        position: 'absolute',
        top: 0,
        left: 0,
        'z-index': '2',
        width: '100%',
        height: '100%',
        opacity: '0',
        cursor: 'pointer'
      })

      el.append(fileInput)
      document.getElementById(scope.file_button_id).addEventListener('change', scope.file_button_open, false); 
    }
  }
});

Контроллер:

$scope.file_button_id = "wo_files";    
$scope.file_button_open = function() 
{
  alert("Files are ready!");
}

Ответ 10

Еще одна директива

HTML

<btn-file-selector/>

код

.directive('btnFileSelector',[function(){
  return {
    restrict: 'AE', 
    template: '<div></div>', 
    link: function(s,e,a){

      var el = angular.element(e);
      var button = angular.element('<button type="button" class="btn btn-default btn-upload">Add File</button>'); 
      var fileForm = angular.element('<input type="file" style="display:none;"/>'); 

      fileForm.on('change', function(){
         // Actions after the file is selected
         console.log( fileForm[0].files[0].name );
      });

      button.bind('click',function(){
        fileForm.click();
      });     


     el.append(fileForm);
     el.append(button);
    }
  }  
}]); 

Ответ 11

лучший и простой способ использовать родной Java Script, который представляет собой один линейный код.

document.querySelector('#id').click();

Просто добавьте 'id' в ваш HTML-элемент, например

<button id="myId1" ng-click="someFunction()"></button>

проверить состояние в коде JavaScript

if(condition) { document.querySelector('#myId1').click(); }

Ответ 12

Я думаю, что вы немного сложнее. Вам действительно нужно вызвать щелчок на вкладке с вашей кнопки?

Я предлагаю вам применить свой стиль к вашему входу, а директива ngFileSelect сделает все остальное и вызовет вашу функцию onFileSelect всякий раз, когда будет отправлен файл:

input.file {
    cursor: pointer;
    direction: ltr;
    font-size: 23px;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-300px, 0px) scale(4);
}