AngularJS:在指令中使用JS函数 - 不好的做法?

时间:2014-02-18 11:18:01

标签: javascript angularjs

我在ng-repeat中有这部分代码:

<div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div>

其中参数是一些$ scope字符串变量...

我想知道是否可以检查(例如在ng-show内)参数 是否包含子字符串。

你可以这样做:

<div ng-show="parameter.indexOf('TEST') != -1">{{parameter}}</div> 

似乎正在起作用;它会显示包含“TEST”关键字的每个参数

我在想:

  • 这是在AngularJS应用程序中执行此操作的正确方法吗?
  • 使用javascript内置的函数是否可以?

修改

参数实际上是这样形成的:(因此不是我上面所说的$ scope变量,抱歉)

<div ng-repeat="(parameter,value) in oneOfMyScopeArrays">

2 个答案:

答案 0 :(得分:3)

<强>更新

由于您处理ngRepeat中的字符串而不是对象,因此无法在数据元素中设置标记。在这种情况下,我建议使用自定义指令。我不同意达里尔·斯诺的观点,即在这种情况下指令是多余的。使用指令(就像控制器中的标志一样),您可以评估parameter一次,而不是在每个$digest周期中进行评估。此外,如果您决定在其他模板中实现相同的功能,而不是复制表达式,这是多余的,您将重用相同的指令。以下是这种指令的快速概念:

.directive('parameter', function() {
  return {
    link: function($scope, $element, $attrs) {
      $attrs.$observe('parameter', function(parameter) {
        if (parameter.indexOf('TEST') == -1) {
          $element.hide();
        } else {
          $element.text(parameter);
          $element.show();
        }
      });
    }
  }
}); 

模板:

<div parameter="{{parameter}}"></div>

与原始解决方案相比,该指令甚至为每个参数设置了一个观察者,这在性能方面更好。另一方面,它禁用双向绑定(参数文本呈现一次),因此如果您想要编辑parameter字符串,它将无法工作。

原始回答

这是正确的方法吗?技术上是的,因为它的工作原理。可以吗?不是因为几个原因:

<强>性能即可。每次$digest循环运行(它可能会运行很多,取决于应用程序的交互性),它必须处理每个这样的表达式。因此,必须解析和评估字符串parameter.indexOf('TEST') != -1,这意味着在每次交互后最多调用.indexOf几次,例如单击带有ngClick指令的元素。在Controller中测试这个假设parameter.indexOf('TEST') != -1并且设置一个标志,例如,不是更高效吗?

$scope.showParameter = parameter.indexOf('TEST') != -1

在模板中你会写

<div ng-show="showParameter">{{parameter}}</div> 

模板中的模型逻辑。当参数应该可见时,很难从你的例子中说出实际的推理,但是由模板决定是否有这个逻辑?我认为这属于控制器,如果不是模型决定,你的视图层将与模型实际工作的假设分离。

答案 1 :(得分:0)

是的,我觉得完全没问题。你可以编写一个你自己的单独指令来做同样的事情 - 它可能看起来有点整洁但是当角度来自ng-show已经内置时它最终是多余的,并且它意味着给用户一点点额外的负载。您还可以在parameter上执行$ scope。$ watch并为ng-show设置另一个范围变量,但这只会将视图中的混乱移动到控制器。

$scope.$watch('parameter', function(){
    if(parameter.indexOf('TEST') != -1)
        $scope.showit = true;
});

然后在视图中:

<div ng-show="showit">{{parameter}}</div>