何时在Angularjs中使用过滤器与指令

Question

何时在Angularjs中使用过滤器与指令

这是一个简单的问题 - 它可能已被问到(只是找不到它......)

在操作数据时,何时使用指令过滤器,反之亦然？

在一个非常简单的例子中,请看这个Plunkr

基本上,我有以下内容 javascript

var app = angular.module('app', []);

app.controller('MyCtrl', ['$scope', function($scope){
  $scope.testMessage = 'Some Text'
}]);

app.directive('myDirective', function(){
    return{ 
        restrict: 'A',
        link: function(scope, element, attrs){

            // do some stuff with the data
            // 
            element.html(scope.testMessage + ' result of my directive');
        }
    }
});

app.filter('myFilter', function(){
    return function(text){
     // do something with text
        return text + ' & result of my filter';
    }
});

Run Code Online (Sandbox Code Playgroud)

以下 html

  <body ng-controller="MyCtrl">
    <div my-directive ng-model="testMessage" ></div>
    <br />
    <div>{{ testMessage | myFilter }}</div>
  </body>

Run Code Online (Sandbox Code Playgroud)

所以你什么时候用一个而不是另一个呢？

Answer 1

Nik*_*los 17

一些提示(非详尽列表):

指示

在...时使用它

您想要对DOM进行结构操作
你想添加行为(控制器)
结果取决于其他合作者(require指令的配置)

过滤

在...时使用它

您正在将值转换为另一个值(例如String→Date)
(上面的子集,但重要的是保证它自己的子弹:)当你正在转换一个数组(例如,以重复元素显示 - filter过滤器和ng-repeat)

Answer 2

Ila*_*mer 9

清晰简单

过滤一般数据过滤/转换

DOM操作/ UI行为指令

在你的情况下,你可以像这样写:

  <div>{{ testMessage + ' result' }}</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，6 月前
查看次数：	6503 次
最近记录：	7 年，12 月前