0

这可能很简单，但我找不到合适的文档来解释如何克服我的问题，这里是：我有一个像这样的中继器......

  <tr ng-repeat="thing in things">
        <td>{{ thing.name }}</td>
        <td>{{ thing.category }}</td>
        <td>{{ thing.content }}</td>
        <td>{{ thing.confirms }}</td>
        <td>{{ thing.declines }}</td>
        <td> <button ng-click="doSomething('{{ thing }}')">Do what we want</button></td>
    </tr>

现在一切正常并符合预期。在doSomething我编写的服务中的函数中，我希望将“事物”对象作为参数传递，我已将其转换为字符串以避免错误（稍后我将对其进行转换）。现在，当我将该对象输出到我的服务时，不会返回对象内容（尽管它们显示在呈现的 HTML 中）。传递给我的服务的是字符串“{{ thing }}”而不是对象值（所以我的 JSON.parse 失败）这是来自 Chrome 开发工具的呈现 HTML：

doSomething('{"name":"Debbie Harry","id":"526f9eb7e4b0b5062e14c1dc","category":"Basic Info","content":"Debbie Harry is cool","confirms":5,"declines":0}')

我将如何克服这一点？如何确保传递的是 JSON 对象而不是 AngularJS 花括号声明？

如果我不能很好地解释自己，请说明，我将重新提出我的问题。

4

2 回答 2

4

像这样做

<td> <button ng-click="doSomething(thing)">Do what we want</button></td>

或者你可以这样做（但不要这样做）

<td> <button ng-click="doSomething(" + {{thing}} + ")">Do what we want</button></td>

ngClick 指令读取该值并将其解析为 JavaScript，因此您可以按thing原样使用该变量。该thing变量可在ng-repeat块内访问。

如果您深入研究 angularjs 源代码，您可以找到此代码。这将帮助您了解ngClick指令的工作原理。

var ngEventDirectives = {};
forEach(
'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress'.split(' '),
function(name) {
  var directiveName = directiveNormalize('ng-' + name);
  ngEventDirectives[directiveName] = ['$parse', function($parse) {
    return function(scope, element, attr) {
      var fn = $parse(attr[directiveName]);
      element.bind(lowercase(name), function(event) {
        scope.$apply(function() {
          fn(scope, {$event:event});
        });
      });
    };
  }];
}
);
于 2013-11-14T11:43:20.847 回答
1

虽然 Sangdol 提供了正确的答案，但我想解释一下幕后发生的事情。

ngClick指令在内部使用$parseservice 来评估表达式doSomething('{{ thing }}')并在 current 上调用它$scope。所以基本上角度是在当前（或父）范围内寻找 doSomething 函数，然后使用参数执行它'{{ thing }}'，它是一个字符串。你看，thing在这个上下文中不是变量，它是字符串的一部分，就像在任何 JS 代码中一样。如果删除引号，$parse则不仅会查看doSomething范围，还会查看属性thing。我所描述的是角度表达式，它们基本上是 javascript 的一个子集。例如，如果您alert在作用域 ( $scope.alert = window.alert) 中提供参考，则可以编写类似

<button ng-click="alert(2+2)">button</button>

不仅角度会调用警报对话框，还会将 2+2 评估为 4。

于 2013-11-14T11:54:54.670 回答