Question

某些控制器中有以下代码：

angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect)

此代码在＆＃34;＃fileInput＆＃34;之前执行。已加载。我修好了：

  $timeout(->
    angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect)
  , 1000)

但它不是一个好的解决方案，因为页面加载可能需要超过1000毫秒。我该如何解决？提前致谢！

Answer 1

angular.element(document).ready(function () {
    angular.element(document.querySelector('#fileInput')).on('change', function(){
        alert('yeah!');
    });
});

Answer 2

第一个红旗是＆＃34;以下代码在某个控制器＆＃34;中。你不应该从控制器操作DOM。

如果不了解应用程序的更多细节（plunkr会有所帮助），最好的建议是在指令中包含使用文件输入的功能。指令的link函数将引用可用于连接事件的文件输入元素。然后，您可以$发出这些事件，以便相应的控制器可以处理它们（或者，调用传递给指令的事件处理程序方法）。

作为一般规则，您永远不必在角度应用程序中使用#id选择器。

.directive('fileUpload', [function(){
    return {
        restrict: 'E',
        replace: true,
        template: '<input type="file"></input>',
        scope: {
        },
        controller: function () {
        },
        compile: function ($templateElement, $templateAttributes) {
            return function ($scope, $element, $attrs) {
                //$element is the input element
                $element.on('change', function(evt) {
                   $scope.$apply(function() {
                      $scope.$emit('fileUpload.change', evt);
                   });
                }
            };
        }
    };
}]);

然后在你的标记中：

<file-upload></file-upload>

加载HTML元素后执行函数的Angular指令

2 个答案: