Question

我对文件类型的输入文件使用Angular指令，但输入变量未定义。

angular.directive("ngUpload", function() {
    return {
        restrict : "A",
        template : '<input id="fileInput" name="file" type="file" class="ng-hide" multiple><md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>',
        link : function (scope, element, attrs) {
            var input = element.find('#fileInput');
            var button = element.find('#uploadButton');

            if (input.length && button.length) {
                button.click((e) => input.click());
            }
        },
    };
});

Answer 1

如documentation中所述，jqLite的查找仅限于按标签名称查找。

所以你可以包含jQuery（在angular.js之前）来通过id检索元素，或者使用另一种方法来获取输入。

你甚至不需要一个id选择器，因为模板中只有一个输入元素，所以这应该有效：

var input = element.find('input');

此外，directive在模块上声明，而不是在全局角度对象上声明。

最后，不要在自己的指令前添加ng-前缀，因为它们可能与（未来）角度核心指令发生冲突。

更完整的例子：

angular.module('myModule').directive("customUpload", function() {
    return {
        restrict : "A",
        template : '<input id="fileInput" name="file" type="file" class="ng-hide" multiple><md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>',
        link : function (scope, element, attrs) {
            var input = element.find('input');
            var button = element.find('md-button');

            if (input.length && button.length) {
                button.click((e) => input.click());
            }
        },
    };
});

在angular指令中找不到元素？

1 个答案: