Question

这个问题是关于在指令模板中使用绑定和过滤器的组合。只需阅读顶部，就可以了解已经完成的工作并且已经有效。

我正在编写一个允许用户上传文件的应用程序，这些文件必须是特定的MIME类型。

该指令在很多地方使用，并且MIME类型需要在这些地方进行更改。我需要动态构造template的{{1}}以适应指令的每个实现。

我在directive的{{1}}中使用绑定，以使其适应HTML中所请求的template：

directive

正如我所说，我在本指令的HTML实现中陈述了我的mime-type：

app.directive("fileUpload", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            mimeType: '@'  
        },
        template: '<input type="file" id="files" name="files[]" accept="{{mimeType}}" multiple />',
        link: function (scope) {

        }
    };
});

这很好用，但我害怕使用这个指令 而不声明 mime-type。我试图制作<body ng-app="app" ng-controller="appCtrl"> <file-upload mime-type="text/html"></file-upload> </body>：

mime-type in my HTML

然后我重新写了我的filter which would remove the accept attribute from the template if the mime-type was undefined：

app.filter('accept', function (){
    return function(mimeType){
        if(mimeType)
        {
            if(mimeType.length)
                return 'accept="' + mimeType + '"';
            else
                return "";
        }
        else
            return "";};
});

你可以猜到，这不起作用，为什么呢？

如果template为template: '<input type="file" id="files" name="files[]" {{mimeType | accept}} multiple />',或mime-type，则过滤器应返回undefined，否则应返回""。

好像""过滤器没有被识别，为什么？如何让指令识别我的过滤器？

Here is the FIDDLE!

Answer 1

它工作正常，只是使用不当。

您正在HTML标记中使用表达式绑定，表达式绑定仅在html标记内的属性内或html标记之外。

示例：

<tag attr="{{ binding }}"></tag>  <!-- Good -->
<tag>{{ binding }}</tag>          <!-- Good -->
<tag {{ binding }}></tag>         <!--  Bad -->

使用您的模板：

<input type="file" id="files" name="files[]" accept="{{mimeType | accept}}" multiple />

现在，如果您将过滤器返回值从return 'accept="' + mimeType + '"';更改为return mimeType;，那么您应该会得到所需的结果。

Fiddle

在angular中使用`指令`的'模板`上的过滤器

1 个答案: