Question

这可能很简单，但我找不到合适的文档来解释如何克服我的问题，这里说：我有一个类似的转发器...

  <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函数中，我希望传递一个'thing'对象作为参数，我已经转换为字符串以避免错误（我稍后会转换它）。现在，当我将该对象输出到我的服务时，不返回对象内容（尽管它们显示在呈现的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花括号声明？

如果我没有自我解释，请说明，我将重新说出我的问题。

Answer 1

这样做

<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});
        });
      });
    };
  }];
}
);

Answer 2

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

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

的内容

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

不仅angular会调用警告对话框，还会评估2 + 2到4。

AngularJS在大括号中返回变量名，而不是值

2 个答案: