当前位置: 首页 > 面试题库 >

在AngularJS中将过滤器与指令一起使用

穆毅然
2023-03-14
问题内容

我正在尝试在AngularJS指令中使用过滤器,但不确定如何使用。从邮件列表上的一些信息看来,您应该可以注入$
filter并使用它,但是我不确定如何/在何处调用它。

我的指令当前如下所示:

myApp.directive('fancyDisplay', ['$filter', function($filter) {
    return {
        scope: {
            'fancyDisplay': '='
        },
        template: "<div ng-repeat='datum in fancyDisplay | filter:tagFilter'>{{datum.name}}</div>"
    };
}]);

虽然filter:tagFilter不能正常工作。如何在指令中过滤数据?

JSfiddle可以从http://jsfiddle.net/VDLqa/4/获得,
在此先感谢您的答复。


问题答案:

您正在指令(scope: { 'fancyDisplay': '=' })上创建新的隔离范围,这意味着您将无法从父范围访问属性。由于tagFilter是在父范围内定义的,因此您将无法访问它。

通过tagFilter作为该指令的属性:

<div fancy-display="model.data" filter="tagFilter"></div>

并在指令上:

scope: {
    fancyDisplay: '=',
    tagFilter: '=filter'
},

jsfiddle :http :
//jsfiddle.net/bmleite/VDLqa/5/



 类似资料:
  • 问题内容: 我有一个以毫秒为单位的UTC日期,我将该日期传递给Angular的日期过滤器以进行人工格式化。 很棒,除了在UTC中,而且日期过滤器认为它在当地时间。 我怎样才能告诉Angular这是UTC? 谢谢。 问题答案: 类似的问题在这里 我将重新发布我的回复并提出合并建议: 输出UTC似乎引起了一些混乱-人们似乎倾向于使用moment.js。 从此答案中借用,您可以执行以下操作(即,使用带有

  • 本文向大家介绍详解AngularJS验证、过滤器、指令,包括了详解AngularJS验证、过滤器、指令的使用技巧和注意事项,需要的朋友参考一下 一、验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: 表单与表单元素都需要通过name引用,请注意设置name的值。获得错误的详细参数可以在示例中看到。 示例代码: 运行结果: 二、

  • 问题内容: 以下HTML,Javascript和JSON可以正确呈现,但该过滤器根本不起作用。我们做错了什么? Javascript: 这两个JSON: api / distributors / my: api /仪表板/目录 问题答案: 角度过滤器无法将对象的对象作为输入。ng- repeat可以渲染它们,但是过滤器需要一个对象数组。解决此问题的最简单方法是让服务器返回没​​有命名键的数组。您还

  • 问题内容: 假设我使用以下命令将数组绑定到标签: 在这种情况下,为关联的标签分配了一系列索引值:(0、1、2,…)。但是,当我从下拉列表中选择某项时,的值将绑定到。绑定实际上应该起作用吗? 另一方面,说我改为执行以下操作: 在这里,标签具有相同的索引,但是整个对象都必须进行更改。它是按设计方式工作的,还是这种行为仅仅是AngularJS的一个不错的bug或副作用? 问题答案: $ index是为n

  • 问题内容: 我想在过滤器中向后端请求并返回请求的结果。问题是服务$ http返回一个承诺,这就是问题。 对于存在的问题,我用$超时和角度在我的小提琴的承诺: 我的小提琴 在我的过滤器中,我使用带有承诺的$ timeout,但是最终目标是使用请求http: }); 然后在我看来,我使用了我的过滤器,该过滤器假定以2秒的延迟显示“ ca marche”,但这不起作用: 您会看到过滤器不返回任何内容,并

  • 问题内容: 我正在尝试使用AngularJS创建我的第一个应用程序。但是,如果我需要针对特定​​情况使用指令,我会感到困惑。 我有一个简单的“地图”页面,需要在其中显示所选区域的纬度/经度值。目前,我根本没有使用指令。我在控制器中执行所有操作,并使用局部显示结果。我不打算在其他任何地方重用我的地图视图。这就是为什么我不觉得我需要指令。 另一方面,我读到某个地方,每次您尝试在控制器中操作DOM(我正