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

这可能很简单，但我找不到合适的文档来解释如何克服我的问题，这里有：我有一个类似于这样的中继器...AngularJS在curley括号中返回变量名称，而不是值

<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显示）。什么是传递给我的服务是字符串“{{事}}”不是对象的值（所以我JSON.parse失败），这从Chrome浏览器开发工具所提供的HTML：

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

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

如果我不是很好地解释我自己，请写明我的意思，我会重新提出我的问题。

来源

2013-11-14 Mike Sav

做这样的

<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-14 11:43:20

它的工作原理！但为什么？ –

我详细阐述了我的答案。 –

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

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

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

不仅角度会调用警告对话框，也是评价2 + 2至4

来源

2013-11-14 11:54:54 package

加一个解释！ –

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

回答

相关问题