Question

<div>
    <input id="txt"  type="text" placeholder="Choose File" />
    <input type="file" id="selectedFile" class="hidden" onchange="ChangeText(this, 'txt');" />
    <span>
        <button type="button" onclick="document.getElementById('selectedFile').click();">Browse</button>
    </span>
</div>

我只想要角度js中的点击事件。有谁能说出来？

我只想要角度js中的点击事件。谁能说出来？代码在评论中

Answer 1

这不是角度方式，DOM应该在代码中调用函数，而不是代码轮询DOM中的事件。

<script>
  $('#btn').click(function() {
    doTheThing();
  });
</script>
<button id="btn">Do the thing!</button>

与

<my-button  ng-click="{{ MyBtnCtrl.doTheThing() }}">Do the thing!</my-button>

带控制器

function MyButtonController() {
  this.doTheThing = function() {
    alert('I\'m doing the thing!')
  };
}

编辑：因为我现在只看到你的代码，你展示的代码不是角度代码。如果您想使用角度，请查看以下链接：

我更喜欢使用codeschool来帮助您入门，因为它更具互动性并提供了一步一步的指导。

Answer 2

<div>
    <input id="txt"  type="text" placeholder="Choose File" />
    <input type="file" id="selectedFile" class="hidden" onchange="ChangeText(this, 'txt');" />
    <span>
        <button type="button" onclick="click();">Browse</button>
    </span>
</div>

$scope.click = function() {
        document.getElementById('selectedFile').click()
};

Answer 3

好的，在我可能没有完全阅读你的问题之前。现在我有了，我认为这就是你要找的东西：https://plnkr.co/edit/pfjU5B17qCzwHKoG4iTN?p=preview

.controller('Upload', ['$scope', function($scope) {
    this.input;

    this.browse = function() {
        this.input.click();
    };
}])
.directive('fileUpload', [function() {
    return {
        'restrict':'E',
        'controller':'Upload',
        'controllerAs':'upload',
        'templateUrl': './upload.html',
        'link':function($scope, $element, $attribute, upload) {
            upload.input = $element.find('input')[1];
        }
    };
}]);

在指令的link-function中，我将输入注入控制器。控制器只是将点击事件激发到节点中，从而调用文件浏览器。

编辑：我个人不会使用输入来显示文件，但会显示所有选定文件的更通用的列表，如果可能的话会预览。这样你只需要使用第一个输入：）

很抱歉没有更好地阅读您的问题，希望这有帮助。

角度js中的GetElementById等效

3 个答案: