在 ng-click 中使用带有字符串参数的角度过滤器答案

【问题标题】：Using angular filter with string parameter in ng-click在 ng-click 中使用带有字符串参数的角度过滤器
【发布时间】：2014-12-11 09:23:36
【问题描述】：

我有一个自定义的角度过滤器指令，它可以使用以下语法替换字符串：

{{ 'MyValue' | replace: 'My':'Foo' }}

这很好用。现在我想在 ng-click 中使用这个过滤器

<button ng-click="alert('{{ 'MyValue' | replace: 'My':'Value'}}')">Click Me!</button>

这会引发解析异常（我假设是因为警报周围的撇号）。在这种情况下，正确的语法是什么？

Plunkr 可在此处获得：http://plnkr.co/edit/xEGjY40LWORt5nlaJq46

【问题讨论】：

在您的 plunkr 中，永远不会触发警报（如果我用普通文本替换代码）。我不确定，但可能是因为您没有控制器？
问题是这个parse exception

标签： angularjs

【解决方案1】：

这是工作的Plunker

我添加了controller 并在ng-click 被触发时调用控制器内部的一个函数

 <body ng-app="MyApp" ng-controller="x">
   <p>{{ -3 | replace: '-':'n' }}</p>
   <p>
     <button ng-click="x('MyValue','replace','My','Value')">Click Me!</button>
  </p>
 </body>

在script.js

myApp.controller('x', function($scope, $filter) {
  $scope.x = function(input,filterName,replaceStr,replaceBy) {
      var filtered = $filter(filterName)(input,replaceStr,replaceBy);
      alert(filtered);      
  }
});

为了更多

ng-click='alert("1111")' 不起作用，因为当你在 ng-click、alert() 中放入一些东西时，它会检查 $scope.alert 所以，alertis not work insideng-click`

【讨论】：

【解决方案2】：

通常，您不能将插值用作 angular ('&') 中可执行属性的参数。

你需要做的是：

标记：

<button ng-click="alert(customValue)">Click Me!</button>

控制器代码

$scope.customValue = $fitler('replace')('MyValue', 'My', 'Value');

【讨论】：